position:absolute relative to parent or to window?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Gert Brinkmann - 27 Jul 2005 18:31 GMT

Hello,

as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an
absolute positioned block element is positioned relative to its parent
element. This is told in the german selfhtml reference, too:
http://de.selfhtml.org/navigation/css.htm#positionierung

In fact firefox and konqueror do position the block relativ to the window
border. This is explained here, too:
http://www.w3schools.com/dhtml/dhtml_css.asp

Which behaviour is correct?

Here is an example:

<html>
<head>
<style type="text/css">
#header { height: 44px;
border: 1px solid black;}

#copyright { border: 1px solid green;
position: absolute;
right: 12px;
bottom: 0px; }

</style>
</head>

<body>
<div id="header">
<div id="copyright">
blah foo text
</div>
</div>
</body>
</html>

Reply to this Message

David Dorward - 27 Jul 2005 18:43 GMT

> as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an
> absolute positioned block element is positioned relative to its parent
> element.

No, to its containing block, which is defined as the nearest ancestor
element which has a position property with a value other than "static". If
there is no such element then it is from the edges of the viewport.

> In fact firefox and konqueror do position the block relativ to the window
> border.

Only if there isn't a containing block ... and you don't have any toolbars
or menu bars in your window.

> This is explained here, too:
> http://www.w3schools.com/dhtml/dhtml_css.asp

W3Schools - wrong again.

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

Gert Brinkmann - 28 Jul 2005 09:50 GMT

>> as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an
>> absolute positioned block element is positioned relative to its parent
[quoted text clipped - 3 lines]
> element which has a position property with a value other than "static". If
> there is no such element then it is from the edges of the viewport.

Thank you very much for your answer. It's unbelievable, but it is true. This
is the way, firefox behaves (I did not check other browsers). Hmm, does
this behaviour make sense? But ok, this is not the question here.

Thanks again,

Gert

Reply to this Message

Jim Moe - 28 Jul 2005 18:20 GMT

>>No, to its containing block, which is defined as the nearest ancestor
>>element which has a position property with a value other than "static". If
>>there is no such element then it is from the edges of the viewport.
>
> Thank you very much for your answer. It's unbelievable, but it is true. [...]

Why is it unbelievable? It provides a way to position:absolute in any
containing block.

Signature

jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

Gert Brinkmann - 29 Jul 2005 14:55 GMT

> Why is it unbelievable? It provides a way to position:absolute in any
> containing block.

Certainly yes, but IMHO it is not very intuitive. If you lay out a DIV
containing a lot of styled HTML, I do not like that the content changes
layout if you change the placing of the DIV. But perhaps I first have to
internalise(?) this technique.

Gert

Reply to this Message

Benjamin Niemann - 29 Jul 2005 22:14 GMT

>> Why is it unbelievable? It provides a way to position:absolute in any
>> containing block.
[quoted text clipped - 3 lines]
> layout if you change the placing of the DIV. But perhaps I first have to
> internalise(?) this technique.

See it this way:

If you have

<div class="a">
..
<div class="b">..</div>
..
</div>

and div.b should be positioned relative to div.a, you don't want the layout
to change, if you insert (for semantic reasons) another level inbetween:

<div class="a">
..
<div>
<div class="b">..</div>
</div>
..
</div>

Signature

Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/

Reply to this Message

Gérard Talbot - 29 Jul 2005 21:33 GMT

Gert Brinkmann wrote :

>>>as I understand the specs http://www.w3.org/TR/CSS21/visuren.html#x19 an
>>>absolute positioned block element is positioned relative to its parent
[quoted text clipped - 11 lines]
>
> Gert

I personally reported this bug at Opera some 30 months ago when Opera
7.0 beta 1 came out. I also reported the problem, that precise bug to
MSIE 7 dev. team too.

"percentage width value on absolutely positioned elements should
calculate the %tage of the containing block, not %tage of the immediate
parent node of the abs. pos. elements. Safari 1.x and Mozilla-based
browsers supports this correctly (...)"
http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerSupportforCSS

FYI, Opera 6.06 did not have that bug: it was positioning an abs. pos.
element regarding its positioned ancestor otherwise relative to the
viewport dimension.

Gérard
--
remove blah to email me

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2005

position:absolute relative to parent or to window?