CSS position attribute

Position is the most vital component in web design and thus it deserves a separate post of its own. It tells your elements where and how they will be positioned in the flow of the page.

There are basically four different positioning properties that are available.

Static: The default property. You don't need to specify this unless you want to enforce a change on your element which receives a different position property from a parent element that is out of your control. Static does not do anything, it practically places the element into the flow of the page in the order it is written in the HTML.

Absolute: Like the name suggest, it is the most overwhelming positioning property. When you choose position:absolute, you have to specify the position by using attributes such as left: , right: , top: , bottom: (not all of them are necessary, use just the ones you will need). These will position your element according to the next parent element, if there are no other parent elements then it will take top-left corner as the reference point.

Beware while using absolute positioning, as powerful as it is, its improper use will restrict the flexibility of your page. As the absolute positioning removes your elements from the flow of the page, they will no longer be in interaction with the other elements of the page. They will rather become stand-alone elements that don't get effected by where other elements are.

Relative: The most commonly used positioning property. When used properly it is the most effective tool that opens up a bunch of powerful opportunities. However it is also the property that gets used improperly most of the time, leading to various problems.

It is confusing because when you say relative, people tend to think that it is relative to some other element, whereas it actually means relative to itself. Let me explain this with a simple example. Say you give an element position:relative; and no other attribute. In this case, you will have your element placed in the flow of your page just as it would have been in static. However when you start giving it attributes such as left: , top: , then you will have your element's position shifting relative to where it should have been.

With the relative property you also gain the chance to use z-index attribute, which is a very powerful attribute. It allows you to place elements on top of each other, the element with the higher z-index will always show up on top. There is a catch though, if you have a static element in that area, it will always be at the bottom even if you specify a z-index. this is something you have to plan beforehand.

Fixed: The rarest property among all four. It certainly has its uses, but has to be thoroughly tested because it has proven to be one of the most problematic on different screen resolutions.

This property positions the element relative to the browser window. When you scroll a page the browser window doesn't change thus your element will stay where it is no matter what, it will practically scroll with your page.

The most popular uses of this property are having a non-scrolling background image, having your header always stick up to the top of the window and having your footer always stick to the bottom of the window. Sometimes it is also used to keep sidebar navigation in view at all times as well, though this is highly unrecommended. Also do never use this for content area elements unless you have an overwhelmingly creative idea.

Bonus Tip: Relative+Absolute: If you have a parent element that has relative position, you can create a child element to it and then absolute position it inside that relatively positioned element.

If you want to delve into the topic more and get a good grasp of the uses, I recommend you to read this 10 Step Guide which explains the uses very clearly.

.................................................................................................................................