Positioning with CSS
- Static is the normal positioning... it is the default flow of the document, so it usually isn't set, unless it is to override a previous style.
- For a fixed element, the containing block is always the browser window (or view port) - that means the fixed element stays at the same place in the window - like a frame.
- The absolutely positioned element is taken out of the normal flow of the document and the space it occupied in the static flow will not be preserved. It is placed with absolute position properties inside the root element, and root element in this case describes the closest positioned ancestor. If there is no positioned ancestor, the initial containing block (= the
box) will be used. So it is placed at a certain position, regardless of any other elements that may already be placed at this position due to the normal (static) flow of the document.
- A relatively positioned element does not have a containing block, it appears to be part of the normal flow. It is moved via the positioning properties (top, right, bottom, left) away from its normal (static) position within the document flow and placed somewhere else while preserving the space it would occupy in the static flow; it takes up space and moves its neighbours away to make space for itself, just like all statically positioned boxes.
Take a look at the next page for some examples.