CSS Positioning

Fixed Positioning

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled:

Example

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

---

Relative Positioning

A relative positioned element is positioned relative to its normal position.

Example

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

h2.pos_top
{
position:relative;
top:-50px;
}

---

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is 'html':

Example

h2
{
position:absolute;
left:100px;
top:150px;
}

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.

Absolutely positioned elements can overlap other elements.

---

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

Example

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

An element with greater stack order is always in front of an element with a lower stack order.

Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.