Because you don't have time to read everything.TM |
Understanding CSS Positioning
|
Because many web developers have never learned CSS positioning, and because it can be confusing for those who try to learn it, I thought it would be helpful to put together a quick guide with visual examples to illustrate static, relative, absolute, and fixed positioning. This is the outer box. This is the inner box with static positioning, which is the default. The box is simply placed in the normal flow of the page. Although it's the default, you can explicitly specify static positioning like this: position: static And this is also the outer box. This is the outer box. This is the inner box with relative positioning. It's offset relative to where it would usually appear according to the normal flow. As you can see, a blank space is reserved for where the box is supposed to appear. Also, the inner box overwrites the outer box. position: relative; And this is also the outer box. This is the outer box. This is the inner box with absolute positioning. Instead of extending across the maximum width available, the width is set to accomodate the box's contents (which you can't see here because the box contains so much text). Also, no space is reserved for the inner box, and the inner box overwrites the outer box. (It may also overwrite the text below this box if your browser window isn't maximized.) In absolute positioning, the box is offset within its context box. This is a little tricky. At first, the context box is the <body> element. However, if any ancestor of the box uses relative, absolute, or fixed positioning, the ancestor becomes the context box. In this case, the outer box uses relative positioning (with no offset), so the outer box is the context box for the inner box. If the outer box used static positioning, the inner box would appear relative to the <body> element, so it would be way up at the top of the page. position: absolute; And this is also the outer box. One other positioning type is fixed positioning. It's not shown here because it would be really annoying, but fixed positioning is used to keep an element someplace where it never moves, even if the page scrolls. Thankfully, it's not used very often. position: fixed; The last positioning value is inherit, which simply means to use the same positioning type as the containing box. position: inherit; Below is the code that creates the above layouts for static, relative, and absolute positioning:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Positioning Demo</title>
<style type="text/css">
.outer {
border: 3px solid black;
background-color: silver;
padding: 1em;
margin: 1em;
position: relative;
}
.inner {
border: 3px dashed black;
background-color: white;
padding: 1em;
margin: 1em;
}
.static {
position: static;
}
.relative {
position: relative;
left: 3em;
top: 3em;
}
.absolute {
position: absolute;
left: 3em;
top: 3em;
}
.fixed {
position: fixed;
top: 3em;
left: 3em;
}
.inherit {
position: inherit;
}
</style>
</head>
<body>
<div class="outer">
<p>This is the outer box.</p>
<div class="inner static">
<p>This is the inner box with <strong>static positioning</strong>, which
is the default. The box is simply placed in the normal flow of the page.
Although it's the default, you can explicitly specify static positioning
like this:</p>
<p>position: static</p>
</div>
<p>And this is also the outer box.</p>
</div>
<div class="outer">
<p>This is the outer box.</p>
<div class="inner relative">
<p>This is the inner box with <strong>relative positioning</strong>.
It's offset relative to where it would usually appear according to the
normal flow. As you can see, a blank space is reserved for where the box
is supposed to appear. Also, the inner box overwrites the outer box.</p>
<p>position: relative;<br>
left: 3em;<br>
top: 3em;</p>
</div>
<p>And this is also the outer box.</p>
</div>
<div class="outer">
<p>This is the outer box.</p>
<div class="inner absolute">
<p>This is the inner box with <strong>absolute positioning</strong>.
Instead of extending across the maximum width available, the width is
set to accomodate the box's contents (which you can't see here because
the box contains so much text). Also, no space is reserved for the inner
box, and the inner box overwrites the outer box. (It may also overwrite
the text below this box if your browser window isn't maximized.)</p>
<p>In absolute positioning, the box is offset within its context box.
This is a little tricky. At first, the context box is the <body>
element. However, if any ancestor of the box uses relative, absolute,
or fixed positioning, the ancestor becomes the context box. In this
case, the outer box uses relative positioning (with no offset), so the
outer box is the context box for the inner box. If the outer box used
static positioning, the inner box would appear relative to the <body>
element, so it would be way up at the top of the page.</p>
<p>position: absolute;<br>
left: 3em;<br>
top: 3em;</p>
</div>
<p>And this is also the outer box.</p>
</div>
<div style="height: 15em;">
</div>
</body>
</html>
| Posted 11/26/2007 Home Submit Content Advertise FREE All Posts About Us Give Feedback Privacy Policy |
Stumble it!
Email to a friend