Skip to main content Link Menu Expand (external link) Document Search Copy Copied

CSS Positioning

Normal Flow: Block level elements appear on a new line. Even if there is space, boxes will not appear next to each other

Relative Positioning: Elements are shifted from normal flow based on the position top and left. The position of other elements is not affected.

Absolute Positioning: Element is taken out of the normal flow of the page and does not affect the position of other elements. It moves as the user scrolls (absolute position on the page).




Fixed Positioning: Element is taken out of the normal flow of the page and does no taffect the position of other elements. It is in a fixed window position as the user scrolls (fixed to the window).




Float Positioning: Element is taken out of the normal flow and it is positioned either to the far left or far right of the container. The element becomes a block element that other elements flow around.

This is more normal flow text, so that we can see how it flows around the other boxes. This is more normal flow text, so that we can see how it flows around the other boxes. This is more normal flow text, so that we can see how it flows around the other boxes. This is more normal flow text, so that we can see how it flows around the other boxes.