When you have a CSS positioned child DIV tag, its z-index property is in relation to the parent DIV tag, just as its left and top properties are. Let me demonstrate what I'm talking about with a few examples.
In my first example, I have a parent DIV tag, "diana", and a child DIV tag, "william". "diana" is at z-index of 20, and "william" is at z-index of 10. Which DIV tag is in front?
Example (in context using an embedded style sheet):
<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
/* parent DIV tag */
#diana {
position:absolute;
left:30px;
top:75px;
z-index:20;
width:200px;
height:200px;
background-color:#996699;
layer-background-color:#996699;
border:solid 1px #996699;
}
/* child DIV tag */
#william {
position:absolute;
left:20px;
top:30px;
z-index:10;
}
//-->
</style>
</head>
<body>
<div id="diana">
<div id="william">
<img src="./graphics/capitalA.gif" width="54" height="54" />
</div>
</div>
</body>
</html>
Here is the above example displayed.
As you can see, even though william has a LOWER z-index than diana, he is still in front. That is because his z-index is NOT in relation to the web page as a whole, but ONLY in relation to OTHER child DIV tags WITHIN diana. ALL child DIV tags of a parent display in front of the parent!
Of course, if william had a sibling DIV tag, harry, within diana in the example above, william and harry's z-index properties would be important for resolving whether harry or william was in front, just as you might expect.
In the next example, "diana" has two child DIV tags, "william" and "harry". "diana" is at z-index of 20, william is at z-index of 10, and harry is at z-index of 15. Since harry and william are both children of diana, their z-index values are only important for resolving their internal front/back conflict; because both william and harry are children of diana, they will naturally appear in front of diana, since she is their parent.
<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
/* parent DIV tag */
#diana {
position:absolute;
left:30px;
top:75px;
z-index:20;
width:200px;
height:200px;
background-color:#996699;
layer-background-color:#996699;
border:solid 1px #996699;
}
/* child DIV tags */
#william {
position:absolute;
left:20px;
top:30px;
z-index:10;
}
#harry {
position:absolute;
left:50px;
top:50px;
z-index:15;
}
//-->
</style>
</head>
<body>
<div id="diana">
<div id="william">
<img src="./graphics/capitalA.gif" width="54" height="54" />
</div>
<div id="harry">
<img src="./graphics/capitalB.gif" width="54" height="54" />
</div>
</div>
</body>
</html>
Here is the above example displayed.
To other sibling elements of diana in the example above, both harry and william have an effective z-index of 20 because they are living within a parent DIV tag; their actual z-index values of 15 and 10 are only pertinent when resolving conflicts between diana's child elements.
I think of each parent DIV tag as kind of a separate HTML page. All of the child DIV tags within that parent DIV tag, then, are positioned within this separate page space, and their CSS-P properties only pertain to their sibling elements within that space. As far as the parent's siblings are concerned, however, the child elements are effectively "locked" to the parent, possessing the parent's properties; here's an example of what I mean by this.
In the next example, I have two sibling positioned DIV tags, "diana" and "charles"; "diana" is at z-index of 20, and "charles" is at z-index of 30. "diana" has one child DIV tag, "william", which is at z-index of 100. When "charles" overlaps "diana", then, will "william" appear in front of "charles" (diana being the purple square, and charles being the gold square)?
<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
/* parent DIV tags */
#diana {
position:absolute;
left:30px;
top:75px;
z-index:20;
width:200px;
height:200px;
background-color:#996699;
layer-background-color:#996699;
border:solid 1px #996699;
}
#charles {
position:absolute;
left:100px;
top:125px;
z-index:30;
width:200px;
height:200px;
background-color:#999933;
layer-background-color:#999933;
border:solid 1px #999933;
}
/* child DIV tag */
#william {
position:absolute;
left:45px;
top:30px;
z-index:100;
}
//-->
</style>
</head>
<body>
<div id="diana">
<div id="william">
<img src="./graphics/capitalA.gif" width="54" height="54" />
</div>
</div>
<div id="charles">
</div>
</body>
</html>
Here is the above example displayed.
As you can see in the above example, "william" does NOT appear in front of "charles". Again, that is because william's z-index is irrelevant as regards charles; william's z-index is only relevant to other child DIV tags within diana. Only diana's z-index is relevent when resolving this front/back conflict with charles, because she is a sibling element of charles; anything contained WITHIN diana effectively possesses her z-index in relation to her sibling elements.
Therefore, even though william has a z-index of 100, that z-index value only relates to other children of diana; to diana's sibling, charles, william effectively possesses it's parent's z-index value, 20.
Note: If you are not certain what I mean when I say "parent", "child", or "sibling", you should refer to the "Tag Nesting" section in Module 1.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.