As I understand it...
* you can nest absolute positioned divs within a relative positioned container div
* the container div itself will be inline with the rest of the document
* therefore, the contents of the container div will not overlap the other parts of the document
For example, suppose you wanted a main content section sandwiched between a header and footer. And suppose, the layout within the main content section contained absolute positioned divs. It seems like you could wrap the absolute positioned sections/divs in a relative positioned container to ensure they did not overlap the footer.
But, when I do this with the code below, the text within the contained div overlaps the footer. Why is this not working as expected?
Please note that I am not looking for the best way to achieve such a layout. I am just experimenting with divs and positioning, and am trying to figure out why they aren't working the way I thought.
Here is the CSS...
body {
background: #0D4C7D;
}
#header {
background: #FFFFFF;
width: 100%;
height: 150px;
}
#footer {
background: #94C37A;
width: 100%;
height: 50px;
}
#container {
position:relative;
width: 100%;
}
#contained {
position:absolute;
}
Here is the HTML
<body>
<div id="header">Header</div>
<div id="container">
<div id="contained">Absolute Positioned Contained Div</div>
</div>
<div id="footer">Footer</div>
</body>