HTML and CSS Reference
In-Depth Information
Another example of absolute positioning
Let's look at another example. Say we have another
<div>
with the id “annoyingad”. We could position it like this:
#annoyingad {
position: absolute;
top: 150px;
left: 100px;
width: 400px;
}
div id=“header”
div id=“sidebar”
div id=“main”
div id=“annoyingad”
div id=“footer”
Just like with the sidebar, we've placed the “annoying
ad”
<div>
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.
Notice the a
nnoyingad <div> is
on top of th
e sidebar <div>.
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 on an
imaginary z-axis (items on top are “closer” to
you, and have a bigger z-index).
