|
|
Posted by ravidew on 11/01/06 18:11
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.
Navigation:
[Reply to this message]
|