CSS Position Explained

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.

[Note: If you have read other portions of this blog you may be aware that I am using this blog to experiment with wordpress. In this particular article I discovered that I don’t know how to force the wordpress editor to let me use <style type=”text/css> type inserts to adjust the css.

About gxxaxx

Sculptor, Game Designer, Programmer, Musician (bass), Writer, Website Developer, Wordpress Design & Support
This entry was posted in CSS, Website Programming and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s