CSS Positioning of Elements

Positioning of elements is extremely important. Consider the Periodic table of elements in Chemistry(ugh!) All the elements are placed in a proper sequence that makes it easier for us to find those elements, grouped together by their properties and atomic numbers.

Well, enough of chemistry now. The point of discussing the periodic table is that positioning matters. How you position the elements of your webpage are extremely important from the point of view of usability i.e., how comfortable a user feels using your website.

CSS can help you a lot when it comes to positioning stuff on your website. The position property is used to specify the positioning for an element. There are four types of position values:

• static
• relative
• absolute
• fixed

Once the position proerty is set, then the element can be positioned on the webpage using the top, bottom, left and right properties but they do not work unless the position value is set. Also, these values will behave differently for each of the position value mentioned above.

Static position

The default for any page element is static. Static means that the element would fit on the page as it normally would. Explicitly specifying static is pretty rare, and can be used to get rid of any inherited position value.

Static positioned elements are not affected by the top, bottom, left and right properties.

div{ 
    position: static;
    border: 15px solid #6699CC;
}

Live Example →

Relative position

This position means relative to itself. Setting an element's position to relative but not specifying any other attributes like top, bottom, left or right will have no particular effect on the element's position. But specifying, say a bottom attribute as, bottom: 20px; would move the element Upwards by 20px as compared to its NORMAL position.

Setting the position to relative makes the element appear on top of any other static element in its area. Other content will not be adjusted to fit into any gap left by the element.

div{ 
    position: relative; 
    border: 4px solid #6699CC; 
}

Live Example →

Absolute position

This value allows you to place an element exactly where you want it to be placed. Positioning attributes top, bottom, left and right are used to determine the exact location. These elements are placed relative to the last parent element. If there is no parent element, these elements are set to be relative to the page itself, i.e. it moves along with the page while scrolling.

div{ 
    position: absolute;
    border: 15px solid #6699CC;
}

Live Example →

Fixed position

This type of positioning is rare but certainly has its uses. A fixed position element is positioned relative to the viewport or the browser window itself and not relative to the parent element or its sibling elements. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

This effect is actually pretty cool, but it needs to be well tested.

div{ 
    position: fixed;
    border: 15px solid #6699CC;
}

Live Example →

You see a fixed orange element on the left side of the browser screen with a Facebook Like button, it is made by using the position:fixed property.

Overlapping Elements

When we play around with positioning so much, there will be situations when elements will overlap with each other. So, in situations of overlap, which element will appear on the top of the other?

The z-index defines the stack order of an element. An element with a greater z-index will always be on top of elements with a lower z-index. An element can have a positive or a negative z-index value.

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

Live Example →

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