If you’re learning CSS, don’t miss this tutorial, as it will introduce you to an important CSS concept: CSS positioning.
Introduction
Positioning is a very important CSS concept, since it is directly responsible for the layout of the website. More specifically, it determines how a particular element is positioned on the site. If the positioning property is not used properly, the website’s layout can become rather messy and crippled. This article will describe the most important concepts of relative, fixed and CSS absolute positioning.
Static Positioning
In CSS, every element can be positioned in three dimensions: horizontal (x), vertical (y) and stack level (z-index CSS property). If there is no CSS positioning property defined for an element, it is rendered according to the static positioning property. Static positioning is not “really” a CSS property; this is actually a default behavior of an element if there are no other positioning properties assigned. Elements with this property will render according their order within the website’s markup.
Relative CSS Positioning
If an element is using relative CSS positioning and if there are no additional CSS properties defined (such as top, bottom, left, right), an element will render in the same way as with the static positioning. In other words, relative CSS positioning is actually defined by the top, bottom, left and right CSS properties, as they determine how much an element will shift in relation to its “natural” position. These four additional properties have default value of 0. Furthermore, they can accept both positive and negative values. Consider the following example:
.someElement
{
position: relative;
left: 35px;
}
These CSS properties will shift an element whose class is “someElement” 35 px the right of its original position. Since top, bottom, left and right can accept both positive and negative values, the same result can be achieved by using the following line of code:
.someElement
{
position: relative;
right: -35px;
}
Furthermore, consider the following example:
.someElement
{
position: relative;
left: 35px;
right: -35px;
}
Obviously, this element will not shift at all. More specifically, it will shift for 0px. The conclusion is that only left or right and top or bottom properties should be used for one CSS class.
Absolute CSS Positioning
If the positioning property of a particular element is set to absolute, it’ll be positioned absolutely. More specifically, it will not affect other elements, and it will be positioned according to its containing block. If absolute positioning is used, top or bottom, left or right, and width and height should be used as well. This is particularly the case for width and height properties, as they determine the dimensions, while top, bottom, left and right determine the position of an element.
If all of this is put in practice, it results in the following lines of code:
.someElement
{
position: absolute;
left: 35px;
top: 50px;
width: 150px;
height: 250px;
}
Fixed CSS Positioning
Fixed CSS positioning is actually not a positioning property for its own, but it is rather a subcategory of CSS absolute positioning. If an element has this type of position assigned, its viewport is the same as its containing block. On the computer screen, an element using a fixed CSS positioning will not move if a website is scrolled. Finally, web developers should be aware of the fact that fixed CSS positioning is not supported by Internet Explorer 6 .
