Head First HTML with CSS

Another example of absolute positioning
Let’s look at another example. Say we have another
with the id “annoyingad”. We could position it like this:
#annoyingad {
position: absolute;
top: 150px;
left: 100px;
width: 400px;
}
The annoying ad is being positioned 100
pixels from the left, and 150 pixels
from the top. It’s also a bit wider than
the sidebar, at 400 pixels.
Just like with the sidebar, we’ve placed the annoying
ad at a precise position on the page. Any
elements underneath that are in the normal flow
of the page don’t have a clue about the absolutely
positioned elements layered overhead. This is a little
different from floating an element, because elements
that were in the flow adjusted their inline content
to respect the boundaries of the floated element.
But absolutely positioned elements have no effect
whatsoever on the other elements.
Who’s on top?
Another interesting thing about absolutely
positioned elements is that you can layer them
on top of each other. But if you’ve got a few
absolutely positioned elements at the same
position in a page, how do you know the
layering? In other words, who’s on top?
Each positioned element has a property called a
z-index that specifies its placement. You’ll see
how to specify a z-index in just a few pages.
The header, main, and
footer s are all
in the flow, and flat
on the page.
div id=“header”
div id=“sidebar”
div id=”main”
div id=“annoyingad”
div id=“header”
div id=“footer”
div id=“annoyingad”
div id=”main”
layout and positioning
Now we have a second , positioned
absolutely, about 100 pixels from the
left and 150 pixels from the top.
div id=“sidebar”
div id=“footer”
Notice the annoyingad is
on top of the sidebar .
The sidebar and annoyingad s
are layered on the page, with the
annoyingad having a greater z-index
than the sidebar, so it’s on top.
you are here 521