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

Tue Jun 18 20:20:01 CDT 2002

On Tuesday, June 18, 2002, at 11:25  pm, Gary Bland wrote:

> 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.

doesn't the normal flow div's margin-top:300px; mean that it should be
300px vertically down from it's parent?..in this case the browser window.

> It has no impact on anything that follows it.

but, because I don't completely understand, that is what is happening,
except the impact is for the browsers moz 1(mac) and ie5 pc to ignore
the margin-top style on the normal flow div and render it at 0,0 px -
not at 0,300px .

If the absolutely positioned div is at the end of the html document, it
gets rendered as expected.

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

In the absolute positioning model, a box is explicitly offset with
respect to its containing block. It is removed from the normal flow
entirely (it has no impact on later siblings).

yeah, i have been reading that over and over all day, but why does it
have an impact if it is not at the end in the html?
>
> gary
>

thanks for the reply,
dave