Position Property: Definition

The position property specifies the type of positioning method used for an element. Before positioning elements, using the top, bottom, left, and right properties, the position property must be set first. Positioning work differently depending on which position value is applied. There are four different position values:

1. static
2. relative
3. absolute
4. fixed

An important concept to understand first is that every single element on a web page is a block. Literally a rectangle of pixels. It may be a block-level or an inline element. This means you can set a width and a height to that element. With the idea that every single element is a block of pixels, think about how to position those blocks to exactly where you want them to go.

STATIC

This is the default position property for every element. Static doesn't mean much, it just means that the element will flow into the page as it normally would. Using other prositioning attributes (top, left, bottom or right), won't change anything, nor can you set a z-index on it.

RELATIVE

This type of positioning means "relative to itself". If you set position: relative; on an element, but no other positioning attributes (top, left, bottom or right), it behaves like it would as a position: static; element. Give it some positioning attribute, eg: top: 10px;, it will shift its position 10 pixels DOWN from where it would NORMALLY be. One problem with this, is that it will sit on top of static elements. When vacating its location on the webpage, white space replaces it, there is no shifting of elements. Another thing to be aware of, is that any element which is a child of a relatively positioned element, can be absolutely positioned within that block.

ABSOLUTE

This type of positioning that allows you to literally place any element exactly where you want it. You use the positioning attributes (top, left, bottom and right) to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself. Absolute elements are removed from the flow of elements on the page, and can cause a shift of other elements around it. Overuse or improper use of absolute elements can limit the flexibility of your site.

FIXED

Fixed elements are positioned relative to the viewport (browser window). The viewport doesn't change when the window is scrolled, so a fixed positioned element stays right where it is when the page is scrolled. This feature needs to be thoroughly tested because different sized screens will give different displays. This can end up being a bad thing.

With the position property’s power, you can accomplish many layouts, limited only by your imagination. Thankfully, positioning has excellent support in both modern and older browsers. Just take extra care working with FIXED properties!

Still confused? Check out the 10 step tutorial.