CSS Flow & Positioning

Till now we have considered the individual box; but a box's layout is also affected by interactions with other elements. Figuring out how these interactions work is the crux of unraveling complex CSS layouts.

Ahead of any CSS changes, boxes are laid out in the normal flow. That is, elements are positioned on a page one after the other in the order they're written in the markup. Nested children boxes are packed within their HTML parent boxes. Block will take up the full width of the parent and height will be auto-adjusted to accommodate content ; inline will expand horizontally & continue on new lines based on content (each such line is a line box). In a normal flow, all the inner contents are interdependent and laid out so that nothing overlaps.

Elements, when taken out of flow, work independently of its siblings and ancestors.

Position & floats are two ways by which an element's default position can be over-ridden. However, absolute positioning and floats also remove the element from the normal flow.

CSS position property can be used to offset elements from their default x-,y- coordinates.

• Static position is basically the normal flow
• Relative is used to nudge the element from its normal position (left/top/etc. is defined wrt the element's current position)
• Absolute, Fixed & Static are used to position the element relative to an ancestor element (may or may not be its parent element)

Float is another way used for positioning. For a floated element, the box is taken out of the normal flow of the document and shifted to the left or right, until it touches the edge of its containing box or another floated element.

That is, there is a fixed space created for the element which moves along with it (unlike in relatively positioned elements). The other elements ignore it in the sense that they try to 'flow around it' as they can - if the elements following the float are able to fit beside it, they will do so. In short, floats do not affect block-level boxes, but can affect the line boxes contained within block-level boxes in current and subsequent elements' boxes. Block elements remain in flow, acting as if the floated element is not even there.

Watch out for

• Affect on sibling elements: Absolutely positioned elements are ignored for purposes of calculating normal flow positioning. They have no impact on the layout of later siblings. However, they initially (before position is set by top/left/etc) occupy the place they would have if absolute position was not set. Due to change in stacking order, later siblings may end up under the absolutely positioned element. In relative positioning, calculations are based on initial position of the element, and later sibling elements' take that position into account. Nudging it with left/right do not reconfigure the siblings, and may lead to overlap. Floats do not affect block-level boxes, but can affect the line boxes contained within block-level boxes in current and subsequent elements' boxes.
• Outer Display: Absolute positioning or floating an element blockifies the box's display type
• Cascade: If you float two elements in the same direction the first element floated is placed farthest in that direction (i.e. the element with the first float: left will be at the leftmost)
• In order for the float property to work, the floated element must have an explicit width
• Positioning & Floats may change the containing block, formatting context, stacking order of the element