Absolute positioning is not always relative to the page. If the enclosing container is positioned relative, the enclosed container, if positioned absolute, will be absolute with respect to the enclosing container. Sounds sort of confusing, I know.
Here is some sample code. The page div has relative positioning so that absolute positioning will be relative to it. The menuContainer div is positioned relative for the same reason. The menu, a contained list, is positioned only with padding. The menu shadow, a div, is positioned absolute. The positioning is relative to the enclosing menu container (which is positioned inside the page div only by margin). The shadow is z-indexed below the page so that text is above it. The menu is z-indexed above the page. Text wraps around the menu container because the container is floated left. Its width is fixed, so that the shadow, though contained, can extend beyond it, to the right, into the text.
I don't know if this will be of any help, I just thought I'd toss it out here. Bear in mind that IE has box dimensioning problems in that margin/padding numbers don't accumulate properly. It also has problems with determining the correct enclosing container. I didn't have to hack that in this particular instance, but sometimes it's necessary. It did give me problems with the shadow matching the menu when an item in the menu expands.
Forgive the large tabs. I just copied and pasted portions of this into Wordpad; should have used another editor.
You can see this at either of the Contributor's Corner links in my signature.
<body>
<div class="page">
***********************************
The page css, for reference, not actually present in this spot.
.page
{
margin: 2em;
background-image: url(../images/paper.jpg);
border: 1px outset #000000;
padding: 2em;
position: relative; Because this is relative, an internal absolutely positioned container will be relative to this
}
************************************
<div class="masthead" id="masthead"> Only positioning for this is via padding
...stuff here...
</div>
<div class="leadin" id="leadin"> Only positioning for this is via padding
...stuff here...
</div>
<div class="intro" id="intro"> Only positioning for this is via padding
...stuff here...
</div>
<br/>
<div class="menuContainer" id="mc">
***********************************
menuContainer css, for reference
.menuContainer
{
background-color: #ffffee;
color: #000000;
border: 1px outset #000000;
width: 15em;
position: relative; Because this is relative, an internal absolutely positioned container will be relative to this
float: left;
margin: 0px 10px 0px 0px;
z-index: 2;
}
****************************************
<ul class="menu"><center>Contents</center>
****************************
menu CSS
.menu
{
list-style-position: inside;
list-style-type: none;
background-color: #ffffee;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: smaller;
line-height: 1.75;
font-weight: bold;
margin: 0px;
padding: 10px;
z-index: 2;
Not positioned, therefore at 0, 0 in the menu container, plus the padding
}
************************************
<hr style="padding: 0px; margin: 0px; border: 1px solid #888888; width: 100%;"/>
<li class="item">
<a href="pointers.php?page=0-0" style="color: #888888;">What is a pointer?</a>
</li>
...more stuff here...
</ul> <!-- end of the menu -->
<div class="shadow">
******************************
shadow CSS, for reference
.shadow
{
position: absolute; Absolute with respect to the enclosing container, the menu container
top: 15px;
left: 15px;
background-color: #000000;
border: 1px inset #000000;
width: 15em;
opacity: .5;
filter: alpha(opacity=50);
z-index: -1;
}
*******************************
<ul class="shadowmenu">Contents
<hr style="padding: 0px; margin: 0px; border: 1px solid #000000; width: 100%;"/>
<li class="item" id="0-0">
<a href="#"> </a>
</li>
...more stuff here...
</ul>
</div> <!-- end of the shadow -->
</div> <! end of the menu container -->
<div class="section"><strong class="sectionhead">What is a pointer?</strong><p>
A pointer is a programming language datatype whose value is used to
...more content....
</div>
...more content.....
</div> <!-- end of the page -->
</body>