CSS 'Position' Property
If you're not familiar with Cascading Style Sheets (CSS) and you make an attempt to jump right into its "position" element you may get a little confused. You have your choice of static, absolute, relative, and fixed. So what's the difference between them? In this article we're going to discuss them but we'll mainly focus on Absolute and Relative.
The W3C has been handling CSS standards for quite a while now and section 9.3 of the CSS Level 2 Specifications is all about Position Schemes. It's actually in this section (subsection 9.3.1) that we want to look at. It deals with the 'position' property and defines how static, relative, absolute and fixed are used.
Static
The initial setting for the 'position' property is static. This means that if you declared a div
with CSS and did not include position: xxx; that it's value would be static. So these two declarations
would be the same:
#one{
position: static;
margin: 0;
padding: 0;
background: transparent;
color: #000;
}
#two{
margin: 0;
padding: 0;
background: transparent;
color: #000;
}
A static box is a normal box that follows the normal flow. This means that the left and top properties
would not come into play. If you used the two ids we set above (#one and #two) and laid them out in a web
page they would follow the normal flow. So if we had:
<div id="one">
Text for div one
</div>
<div id="two">
Text for div two
</div>
The text on the web page might look like so:
Text for div one
Text for div two
If we changed them around:
<div id="two">
Text for div two
</div>
<div id="one">
Text for div one
</div>
The text on the web page might look like so:
Text for div two
Text for div one
In the 1st example the text in div #one is shown first on the page because it was declared first in the
HTML code for the page. In the 2nd example the text for div #two is shown first because it was declared
1st in the HTML code for the page. This is the "normal flow". Items declared 1st are shown first when using
the 'static' value.
Fixed
The 'fixed' value is almost not even worth talking about. Microsoft Internet Explorer seems to wring the life out of this value and almost never gets it right. Much like the 'absolute' value, 'fixed' uses top/bottom and left/right values to determine it's position with respect to it's containing block. However the difference between 'absolute' and 'fixed' is that a 'fixed' position means that the box would not move when scrolled. Think of this like having a fixed background image on a web page. When you move the scrollbar the image stays in one place. This is suppose to be how the 'fixed' value works, but IE still seems to render this incorrectly on many machines.
Absolute
The 'absolute' value differs from the rest because when you use it you actually remove the box from the
normal flow by using the top, bottom, left and/or right properties. Remember the example above with our
two divs (#one and #two)? If we set div #two to have a position: absolute and then set the top and left
properties to 0, we would actually have placed div #two on top of div #one. The result would be two
lines of text on one line:
Figure 1
Relative
The 'relative' value seems to cause a few problems for people the first time they encounter or use it. Like the 'absolute' value it too can rely on the top/bottom, left/right properties to position the box. However unlike the 'absolute' value 'relative' does not remove the box from the normal flow.
When you set the 'relative' value and use (for example) a top value you'll be positioning the box
relative to it's normal flow. This probably can best be shown by example. Let's assume we have our
two divs again, #one and #two, with the following settings:
#one{
position: static; /* although we don't need this line */
margin: 0;
padding: 0;
background: #abc;
color: #000;
}
#two{
position: relative;
top: 50px;
left: 0;
margin: 0;
padding: 0;
background: #789;
color: #000;
}
Now in our web page code we have:
<div id="one">
Text for div one
</div>
<div id="two">
Text for div two
</div>
And the result:
Figure 2
The red line and the 50px were added to show you that there's a space between the two divs of 50 pixels. This
is to show you that even though we have not added any padding, margin, line breaks or any other code the
two divs are separated by 50 pixels because we're positioning the second div (div #two) relative to its
normal flow.
It's important to note though that the 'relative' value can be a little trouble some at times. If you're
not careful how you use it and compensate with other properties the normal flow may not look so normal.
For example I've added the two divs to the top of this article as I wrote it. The order of the divs in the
code are: div #one, div #two and then the div that contains this article. Look at what happens:
Figure 3
If we were to remove the 'relative' value from div #two (let it be static) and keep the same order we would
have different results:
Figure 4
You may notice that in Figure 3 the 'space' between the div with "Text for div one" and the top of the box in grey (the div with a portion of the text reading "CSS") is just enough space for the div #two ("Text for div two"). If not, look at Figure 4 and you'll notice what I'm talking about. Why does this happen?
The second div (div #two) should be just below div one (div #one) when you look at the HTML code. We had
it in this order:
<div id="one"> ... </div>
<div id="two"> ... </div>
<div id="content"> ... </div>
The normal flow allots for the space of div #two but then displays it down 50 pixels from it's original
normal flow position. However div #content is there so the information from div #two shows over it. This
is something we need to be careful of when using the 'relative' value for position.
Conclusion
I hope that this article has cleared up some questions about the position values allowed by CSS. The more you play and work with them the easier they are to understand and then use when you need them. Good luck and if you have any questions be sure to stop by the PC forums and ask.