CSS Position Explained

These are basically notes to myself. I find I can work things out better in my head if I am trying to communicate to another. If you find these notes useful I'm gratified.

Position has the following values:

  • static
  • relative
  • absolute
  • fixed
  • inherit
#somediv {
	position: static;
}

position: static;

The default positioning for all elements is position:static. This means all elements have this type of positioning automatically. You don't have to do a thing.

position:static means the element is not positioned. The element is left exactly where it would normally fall as part of the normal flow of the page.

It helps me to think of positioning as what happens to the element after the normal placement is calculated.

In this regard, position:static means put the element where you thought it should go.

Static, is not quite the word I would have chosen for this. But "leave it where you calculated it to go" is too long for the value. To help remember its function I think of static as static. Stat meaning something like "take it as given", or "leave it as is."

Normally you wouldn't use position:static -- since it is the default. But, if you need to override a positioning that had been previously set then position:static will put the element back into normal (default) mode.

position:relative;

Relative means to position the element "relative" to where it would go if we didn't monkey around with it.

You would use top, right, bottom, and right to position the element relative to where the normal flow of the document would naturally place the element.

#somediv {
	position: relative;
	left: 10px;
	top: 10px;
}

The above example would move the element somediv to the right 10 pixels and down 10 pixels. But, wait a minute. The values are left and top. That means move the left edge in the positive (horizontal) direction 10 pixels. And, move the top edge in the positive (vertical) direction 10 pixels.

In addition to moving the element around a bit, position:relative performs another very important task -- it will establish a context for position:absolute. But, more about that later.

Relative Example Code:

.posrel {
	position: relative; 
	top: -27px; 
	left: 120px;
	}
<ul>
<li>This is sentence 1</li>
<li>This is sentence 2</li>
<li class="posrel">This is sentence 3</li>
</ul>

Result:

  • This is sentence 1
  • This is sentence 2
  • This is sentence 3

In the above, sentence 2 follows naturally after sentence 1 as dictated by the margin, padding, etc for the list. Normally sentence 3 would also follow the same natural flow and show up right below sentence 2. However, we have set the position to relative and gave it a value of -27px (vertical) and 120px horizontal.

Watch what happens if we float the li elements.

  • This is sentence 1
  • This is sentence 2
  • This is sentence 3

Now the sentence 3 is moved over to the right and up, from the position it would normally have taken.

It is moved relative to whatever position it would have based on normal flow.

position:absolute;

When using position:absolute, the element is no long calculated as part of the document. It is not included in any calculations of flow. It is handled totally separately.

It is handled by you telling the browser exactly, absolutely, where you want the element to be.

Absolute Example Code:

.posabs {
	position: absolute; 
	top: 0px; 
	left: 0px; 
	color: #ff0000;
	}

<p class="posabs">
This was positioned absolute.<br>
It will be explained in the<br>
article below.</p>

Result:

This was positioned absolute.
It will be explained in the
article below.

To see the results look in the upper left corner of this page. You will need to scroll all the way to the top.

The sentence appears in the upper left corner because it is positioned absolute in reference to the first parent that has position other than static.

An absolute positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>

Let's try that again, but this time contain the sentence in a parent element with a position not equal to static.

This was positioned absolute.
It will be explained in the
article below.

Now we see the sentence positioned absolute in relation to the blue div -- which has position relative.

Please note, if we did not give the div a width and height, the browser would have created a very short div -- because there is no <p> element inside the div to fill it. Since the p element is position:absolute it is outside the consideration of flow. It is outside of consideration for its own placement and outside consideration for placement of other elements. It is outside of consideration.

position:fixed;

An element with fixed position is positioned in relation to the browser window. Remember, absolute is positioned in relation to a parent. In fixed the element is in relation to the browser window and nothing else.

One of the results of this is the element will not move when the window is scrolled.

As in absolute, fixed position elements are removed from normal flow. They do not enter into the calculation of flow (and resulting position) for itself or other elements.

Fixed Position Example

.posfixed {
	position: fixed;
	bottom: 0;
	left: 0;
	color: #0000ff;
	}
<p class="posfixed">This is sentence is fixed
in place by position:fixed.</p>

Result

This is sentence is fixed
in place by position:fixed.

If you look to the lower left of the browser window you will see the sentence fixed in place.

Now for the bad news: position:fixed does not work in IE6. If you are providing support for IE6 you will need to make a fix.

The basic fix is to place your html outside of any divs, then selectively set the position for IE6 to position:absolute. Since the content is outside of any wrapper divs IE6 will position relative to the port.

.box {
	position: fixed;
	left: 50%;
	top: 180px;
	margin: 0 0 0 -370px;
}
* html .box { 
	position: absolute;
}

The "* html" part is used to selectively input css into IE6. For myself, I don't go that way. I prefer to use a conditional statement and load a modifying css file. There are pluses and minuses to both approaches. I will leave it to google search and experts more knowledgeable on the topic than myself to fill you in.

<!--[if IE 6]>
<link type="text/css" href="main6.css" rel="stylesheet">
<![endif]-->

p.s. This page will not work for fixed position in IE6. I could not put the html outside of the wrapping div. You can take a look at Ryan Fait's page for a working IE6 fix.

position:inherit

Inherit means to inherit. Or, in other words use the position of your parent. One reason for doing this might be to reset the position value in a circumstance that you want to set it to the position value of the parent rather than static.

Free Consulting 100% 
Satisfaction Guaranteed

Free Newsletter


Learn How to Choose Web Hosting