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.
Search WWH ::

Custom Search