HTML and CSS Reference
In-Depth Information
How absolute positioning works
Let's start by getting an idea of what absolute
positioning does, and how it works. Here's a little
CSS to position the sidebar
<div>
with absolute
positioning. Don't type this in just yet; right now we
just want you to get a feel for how this works:
#sidebar {
position: absolute;
top: 100px;
right: 200px;
width: 280px;
}
What the CSS does
Now let's look at what this CSS does. When an
element is absolutely positioned, the first thing the
browser does is remove it completely from the flow.
The browser then places the element in the position
indicated by the
top
and
right
properties (you can
use
bottom
and
left
as well). In this case, the sidebar
is going to be 100 pixels from the top of the page, and
200 pixels from the right side of the page. We're also
setting a width on the
<div>
, just like we did when it
was floated.
The sidebar is
positioned 200
pixels from the
right of the pa
ge.
Be
cause sid
ebar is n
ow
ab
solutely
positione
d, it
is
removed
from th
e flow
an
d positio
ned acco
rding
to
any top
, left, ri
ght,
or
bottom
propert
ies
th
at are s
pecified.
div id=“header”
div id=“sidebar”
div id=“main”
div id=“footer”
Because
the sidebar is o
ut of
the flow
, the other ele
ments
don't eve
n know it is th
ere,
and they
ignore it tota
lly.
