Posted by Ben C on 04/16/07 08:02

On 2007-04-16, Jon Slaughter <Jon_Slaughter@Hotmail.com> wrote:
[...]
> What I need to know is how nested containers with different combinations of
> positions work. On my sub menu with a position:fixed and if I do
> position:absolute on any element contained in it then my coordinates always
> end up relative to viewport.
>
> I've tried many things..
>
> if I do something like
>
><div style="position:fixed">
><div style="position:relative">
></div></div>
>
> and in the second div dot he coordinates refer relative to the fixed
> container of the first? When I do stuff like that in my original code it
> totally screws up the menu. That is, I have to have the sub menu as fixed
> but when I try to create a container inside that that has relative coords it
> then screws up.
>
> Maybe I need to specify something else besides display:inline or block?

If you set position: fixed or position: absolute, you get display: block
whatever you specify.

absolute: origin is containing block infimum point (containing block is
generally nearest ancestor with position of anything except static)

fixed: origin is viewport infimum.

relative: origin is infimum of normal-flow box.

Yes the terms are very confusingly named. Relative is the odd one out--
the box is flowed normally, and then offset at the last minute from its
normal-flow position, leaving a gap where it was.

[Back to original message]