Tutorial by Examples

Defining position as fixed we can remove an element from the document flow and set its position relatively to the browser window. One obvious use is when we want something to be visible when we scroll to the bottom of a long page. #stickyDiv { position:fixed; top:10px; left:10px; } ...

To change the default stack order positioned elements (position property set to relative, absolute or fixed), use the z-index property. The higher the z-index, the higher up in the stacking context (on the z-axis) it is placed. Example In the example below, a z-index value of 3 puts green on to...

Relative positioning moves the element in relation to where it would have been in normal flow .Offset properties: top left right bottom are used to indicate how far to move the element from where it would have been in normal flow. .relpos{ position:relative; top:20px; left:3...

When absolute positioning is used the box of the desired element is taken out of the Normal Flow and it no longer affects the position of the other elements on the page. Offset properties: top left right bottom specify the element should appear in relation to its next non-static containing ...

The default position of an element is static. To quote MDN: This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply. .element{ position:static; }