Head First HTML with CSS

an absolute gotcha
One more thing you should know about
absolute positioning
So far, when you’ve used the left, right, top, and bottom properties to specify
the position, these numbers have always been with respect to the edge of the page,
right? Well, we need to refine that just a bit.
When you position an element, you’re specifying the position relative to the closest
ancestor element that is also positioned. So, you’re probably saying, “What? I haven’t
positioned anything except for the sidebar. How could there be an ancestor in my
XHTML that is already positioned?” Believe it or not there is – the element,
which the browser positions for you when it creates the page.
But, let’s take this one step further. Say you wanted to absolutely position another
inside the sidebar.
532 Chapter 12
Here’s a new nested
inside the sidebar.
... more XHTML here ...
...
If we absolutely position the “tv” , its closest
positioned ancestor is the sidebar . And so,
the positioning will be relative to the edges of the
sidebar, not the page.
#tv {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
}
Another thing to know... if you get caught in a
conversation about “closest ancestors that are
positioned” at your next cocktail party, just say
the “nearest containing block that is positioned.”
That’s the terminology the experts use.
div id=“header”
div id=“main”
div id=“footer”
div
id=“sidebar”
100
pixels
The “tv” is
positioned relative
to the sidebar ,
not to the page.
100
pixels
div
id=“tv”
If you’re positioning with respect to the
element, then the bottom property may not
do what you’d expect. You’d think the “bottom”
would be the very bottom of the Web page
itself, but the element actually defines
this as the bottom of the browser window. So,
if you want to absolutely position an element
from the bottom of the page, rather than the browser
window, you need to place your element inside an element
that extends to the bottom of your page, and is positioned.
One way to do this is to put your element into a relatively
positioned element at the bottom of the page. We’ll look at
relative positioning later in the chapter.