Secció 4: Posicionament CSS
4. Esquemes de posicionament
En els tres capítols anteriors hem vist els diferents tipus de caixa i les propietats que en controlen les dimensions. A partir d'ara ens centrarem en el posicionament CSS pròpiament dit.
Les caixes generades pels elments HTML es representen d'acord amb un dels següents tres esquemes de posicionament: fluxe normal, posicionament absolut i elements flotants (floats). En aquest apartat 4 ens ocuparem dels dos primers, i veurem el darrer cas al capítol següent.
Nota: Simplificaré lleugerament algun dels conceptes per no complicar massa aquest tema. Per a un tractament més estricte el millor és accedir directament a l'especificació CSS.
4.1. Fluxe normal
Per defecte, els elements HTML es disposen a la pàgina d'acord amb el fluxe normal. Aquesta és la situació "normal", la que hom espera quan veu una pàgina HTML.
En el fluxe normal els elements poden pertànyer a un dels dos contexts de format següents:
- Context de format de bloc. Les caixes es situen una sota de l'altra, ocupant tot l'espai horitzontal disponible.
- Context de format inline. Les caixes es situen una al costat de l'altra, i la seva amplada s'ajusta al contingut de l'element.
Aquest és el comportament que ja hem vist anteriorment (apartat 2: 'Elements de bloc. Elements inline'). Però com veurem a continuació hi ha altres esquemes de posicionament que podem controlar mitjançant propietats CSS. Aquestes altres possibilitats ofereixen una gran flexibilitat a l'hora de distribuir els elements a la pàgina, i constitueixen el nucli del posicionament CSS - ja era hora, no? :)