[thelist] the order of code in html?(absolute div on top of div)

Tue Jun 18 17:26:01 CDT 2002

david currey wrote:
> hello,
> if i have an absolute positioned div before a relative div in my html,
> the relative div ignores its positioning /padding etc.
>
> if the absolute positioned div is at the end of the document it renders
> correctly.
>
>  I would like to understand why...
>
> eg.  THIS WORKS AS EXPECTED
>
> <?xml version="1.0" encoding="iso-8859-1"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <title>why</title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1" />
> <style type="text/css">
> .threehundreddown {
>     height:115px;
>     z-index:1;
>     background-color: #0033FF;
>     margin-top: 300px;
> }
> </style>
> </head>
>
> <body>
>
> <div id="threehundreddown" class="threehundreddown">down there
> </div>
> <div id="abspositioned" style="position:absolute; width:200px;
> height:300px; z-index:1; left: 0; top: 0; background:
> #0099FF;">lklklk</div>
>
> </body>
> </html>
>
>
> eg.  THIS DOES NOT WORK
>
>
> <div id="threehundreddown" class="threehundreddown">down there
> </div>
> <div id="abspositioned" style="position:absolute; width:200px;
> height:300px; z-index:1; left: 0; top: 0; background:
> #0099FF;">lklklk</div>
>
> Does anyone know why this is happening?
>
> thanks,
>
> dave

When you use absolute positioning you remove the box from the flow of
the doc. It has no impact on anything that follows it.

http://www.w3.org/TR/REC-CSS2/visuren.html#absolutely-positioned

gary