Opera relative and absolute positioning

Hi all,


I've met a problem with Opera and its ability to render absolutely
positioned divs inside relatively positioned parent blocks, themselves
contained inside a relatively positioned block.
I'm surely missing something, but what? Any help would be kindly
appreciated

Here's a code sample:

..grandparent{position:relative;}
..parent{position:relative;}
..parent .sub{
position:absolute;
top:19px;
left:0px;
display:none;
z-index:1;
}

<div class="grandparent">
<div class="parent">
<div class="sub">text</div>
</div>
</div>

The display:none property is modified to display:block on a click
event happening somewhere else. Hence the hidden div appears as a
submenu, whose position depends on the parent block.

Any clue on why Opera cannot position this child block correctly? Or
is there anything wrong with my way of doing it? In fact, the .sub
divs seem to be positioned relative to the .grandparent div, not their
respective .parent divs.

Thanks for the anwser

In article louissan wrote:

Hi all,


I've met a problem with Opera and its ability to render absolutely
positioned divs inside relatively positioned parent blocks, themselves
contained inside a relatively positioned block.
I'm surely missing something, but what? Any help would be kindly
appreciated

Here's a code sample:

URL would be better, as your code does nothing useful to demonstrate your
problem.

The display:none property is modified to display:block on a click
event happening somewhere else. Hence the hidden div appears as a
submenu, whose position depends on the parent block.

OK. So I changed it, and still unable to see any difference.

Any clue on why Opera cannot position this child block correctly?

What version of Opera? I don't know if any version of opera since 4 is
buggy in this.

Or is there anything wrong with my way of doing it? In fact, the .sub
divs seem to be positioned relative to the .grandparent div, not their
respective .parent divs.

With your code, there is no difference, as grandparent and parent are
identical. If I ad something before parent, it is apparent that
positioning works correctly.



--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

louissan wrote:

.grandparent{position:relative;}
.parent{position:relative;}
.parent .sub{
position:absolute;
top:19px;
left:0px;
display:none;
z-index:1;
}

div class="grandparent"
div class="parent"
div class="sub">text</div
/div
/div

Any clue on why Opera cannot position this child block correctly? Or
is there anything wrong with my way of doing it? In fact, the .sub
divs seem to be positioned relative to the .grandparent div, not their
respective .parent divs.

As to _why_ I don't really know, but I used to have the same
problem. I decided to take away the position:relative of the
..parent, and have the .sub positioned absolute, relative to
the .grandparent, in all browsers.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

louissan (AT) caramail (DOT) com (louissan) wrote:

I've met a problem with Opera and its ability to render absolutely
positioned divs inside relatively positioned parent blocks, themselves
contained inside a relatively positioned block.

.grandparent{position:relative;}
.parent{position:relative;}
.parent .sub{
position:absolute;
top:19px;
left:0px;
display:none;
z-index:1;
}

div class="grandparent"
div class="parent"
div class="sub">text</div
/div
/div

The display:none property is modified to display:block on a click
event happening somewhere else. Hence the hidden div appears as a
submenu, whose position depends on the parent block.

Then there wasn't much point in including it in the example was there?

Any clue on why Opera cannot position this child block correctly? Or
is there anything wrong with my way of doing it? In fact, the .sub
divs seem to be positioned relative to the .grandparent div, not their
respective .parent divs.

The above example renders the same in Opera 7.23 and IE6, in both
Quirks and Standards modes.

Do you by any chance have a float on .parent? That will make a
difference. Opera doesn't allow an element to be both positioned and
floated and will apply the float but ignore the position.

This is probably an error - the CSS specs say that float does not
apply to absolutely positioned elements, but doesn't, as far as I can
see, say anything about the interaction of float and relative
position.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Thanks

It just so happens that i had a float on .parent ... but indirectly.

I had a .grandparent *{float:left} declared somwhere up in the stylesheet.

Thank you again, Steve.

Steve Pugh <steve (AT) pugh (DOT) net> wrote

Do you by any chance have a float on .parent? That will make a
difference. Opera doesn't allow an element to be both positioned and
floated and will apply the float but ignore the position.