CSS Position

Tuesday, March 27, 2012

tags CSS

The CSS position property allows you to position an element. With this property, you can position elements side to side, or behind one another. Elements can also be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is specified. The top, bottom, left, and right properties work differently depending on the value you specify for the position property. There are five different values you can use to specify the position of an element. The five values are static, fixed, relative, absolute, and inherit. When working with the position property, make sure that you test across various browsers. Not all browsers will display the same results.


HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Elements that have a position of static are not affected by the top, bottom, left, and right properties. Normally, you would not specify this unless you needed to override a position that had been previously set.


An element with fixed position is positioned relative to the browser window. The element will not move from that location even if the user scrolls down the page. Negative values for top, bottom, left, and right are allowed.

.div1 {position:fixed;top:25px;left:10px}

Fixed positioned elements are removed from the normal flow. You should note that fixed positioned elements can overlap other elements. This position should not be used unless you intend for the element to be fixed in a certain location on the page. You should note that values assigned to the top, bottom, left, and right values will set the element that distance from it normal edge. For example, if you specify 25px for top, that means that the element will be placed 25px from its top normal position. In other words, it will move the element 25px down.


An element with a relative position is placed relative to its normal position. The element with a relative position can be moved and overlap other elements, but the original reserved space for the element is still preserved in the normal flow.

.div1 {position:relative;left:10px}

An element that has been styled with a relative position of left:10px, will move to the right 10px. The element will be located 10px from its original left position.


An element with an absolute position is positioned relative to the first parent element that has a position other than static. If no such element is found, the html element is referenced.

#div1 {position:relative;width:500px;height:100px}
#div2 {position:absolute;bottom:0px;right:0px;}

In this example, a div that has been assigned an id of div2 will be removed from its normal flow and placed at the lower right corner of the div with an id of div1.

Normal text...
Lower Right Corner

Z-index Property

When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element. In other words, which element should be placed in front of, or behind, the other element(s). An element can have a positive or negative z-index value. This is very helpful when placing images behind text.

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

Normal text that is in front of the image.z-index image

An element with greater z-index is placed in front of an element with a lower z-index. If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

CSS: The Missing Manual HTML CSS and JavaScript Editor HTML CSS: The Complete Reference