Stylesheets - z-index not positioning properly?

Author

z-index not positioning properly?

ravidew@gmail.com

2006-11-05, 11:33 pm

Perhaps someone else can learn from my mistake.

As many developers may have learned, the "z-index" CSS property can
(generally) only be applied to an element that is positioned; in other
words, an element that has "position: absolute" defined.

What is not explicitly spelled out (perhaps because it's common sense
to some... not me) is that when elements are nested, the inner elements
cannot be z-index'ed above the parent.

<div id="outer" style="position: absolute; top: 10; left: 0;
z-index: 1">
<div id="inner" style="position: absolute; top: 0; left: 0;
z-index: 2">
<p>You may think this would be on top...</p>
</div>
***
</div>

<div id="biltong" style="position: absolute; top: 10; left: 0;
z-index: 1">
<p>...but this is actually on top.</p>
</div>

In this example, the "inner" div's z-index of 2 only places it above
any other div's you may define within the "outer" div (where the ***
are). It's not placed above the "biltong" div, because the latter
shares the same z-index as the "inner" div's parent.

If you want the contents of the "inner" layer to be on top of
everything else, its parent div "outer" needs to have a higher z-index
than the other layers.

Practical application: drop-down menu's that should appear above other
layers.

ravidew@gmail.com

2006-11-19, 7:36 pm

Yes, the "px" unit suffix was left off accidentally.

As for z-index itself: if anyone is confused about it, don't read my
first example. Find another.

I think it would be in the W3C's best interest (and undeniably also my
own) for them to create a XHTML/CSS/whatever reference site of their
own, one that:
- is concise enough to make finding the element/property/etc being
looked up easy
- is capable of expanding upon basic concepts with more details such as
examples, browser compatibility, known workarounds, etc.

Feel free to post any links to ref sites you use; my point is, the W3C
drafted this, why not spoil us with more tools?

On Nov 1, 7:08 pm, "rh" <disposable12...@cableone.net> wrote:
> <ravi...@XXXXXXXXXX> wrote
>
>
>
> http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
>
> "Other stacking contexts are generated by any positioned element (including
> relatively positioned elements) having a computed value of 'z-index' other
> than 'auto'."
>
>
>
>
>
>
>
>
>
> the "outer" div.
>
> Did you try not setting a z-index on the outer div?
>
> RTM -> z-indext "stacking context"
>
> div. That's how it's supposed to work.
>
> <div id="outer" style="width:300px;position: absolute; top: 0; left: 0;
> background-color:red">
> <div id="inner" style="width:200px;position: absolute; top: 15px;
> left: 15px; z-index: 2; background-color:lime">
> <p>You may think this would be on top...(it is now)</p>
> </div>
> This is the parent of inner with no z-index.
> </div>
> <div id="biltong" style="width:100px;height:200px;position: absolute;
> top: 10px; left: 10px; z-index: 1; background-color:yellow">
> <p>...but this is actually on top (not).</p>
> </div>
>
> RTM,RTM,RTM
>
> Rich