[Browsers participating in the test: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2] It seems that many students are confused about why this div is on the upper level and that div is on the lower level. No matter how you set the z-index, you will be crazy, vomiting and diarrhea, nausea and insomnia, and depressed, causing you to not use the superposition of layers at will. . However, the superposition effect of layers appears frequently in interactive design, so we must control it. To control it, we must master its rules. First, let’s clarify a few concepts that need to be used in the article : Static positioning: position:static (the default value of the position property). Dynamic positioning: position:relative or position:absolute or position:fixed. Ancestor element: Any element that contains this element. Parent element: The ancestor element that directly contains the element. Peer element: an element with a common parent element. Note: These concepts are customized by the author and are only used in this article. Quote: The peer element is a very critical word, and it needs to be explained in detail here. <div> In this example, div#a and div#b are not "simultaneous elements". Only elements like div#b and div#c that have the same parent div#f can be called "simultaneous elements". End of quote Let’s take a look at these five rules : Rule 1: When the positioning method of peer elements is the same and there is no z-index setting, html relies on the latter. Run the code box Rule 2: When the same elements are both dynamically positioned and there is a z-index setting, the one with the largest z-index value is the top. Run the code box Rule 3: The positioning methods of peer elements are different, and dynamic positioning is the top priority. Run the code box Rule 4: When non-simultaneous elements, any and their ancestral elements do not have dynamic layout, html relies on the latter. Run the code box Rule 5 : [Important] When any of the non-simultaneous elements have dynamic positioning, each of them will look for the dynamic positioning ancestral elements upwards, and each of them will take out the highest level of ancestral elements (or themselves) for comparison. . Case 1: No matter how big the z-index of the child element is, the greater the parent element is. Case 2: The parent element is lower, and the child element can also be higher. Case 1, Case 2 combined with extended comparison. Run the code box Quote: In fact, the first four points are all basic, and only the fifth point is difficult to understand. Here is a detailed explanation: <div id="ab" style="position:absolute;"> In this example, let's compare the cascade relationship between div#a_inner5 and div#b_inner4. When the parent element is lower and the child element can also be higher, it is to use non-peer elements when the ancestor element has a dynamic layout, its comparison has nothing to do with position:static, but its ancestor element can be compared through the html position. . End of quote Of course, sometimes there are special cases, such as flash, and select in ie6 that cannot be blocked. These are all abnormal situations. You can search for the relevant articles yourself.
[Operating System: Windows]
<div></div>
<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="f">
<div></div>
<div id="b"></div>
<div id="c"></div>
<div></div>
<div></div>
<div></div>
</div>
[Ctrl+A All selection tips: You can modify some codes first]
[Ctrl+A All selection tips: You can modify some codes first]
[Ctrl+A All selection tips: You can modify some codes first]
[Ctrl+A All selection tips: You can modify some codes first]
[Ctrl+A All selection tips: You can modify some codes first]
<div id="a" style="position:relative; z-index:100;">
<div id="a_inner1">
<div id="a_inner2">
<div id="a_inner3" style="position:relative; z-index:98;">
<div id="a_inner4">
<div id="a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "b">
<div id="b_inner1">
<div id="b_inner2">
<div id="b_inner3" style="position:relative; z-index:99;">
<div id="b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
Until the next level of the ancestor element div#ab, the ancestor elements of div#a_inner5 include: div#a, div#a_inner1, div#a_inner2, div#a_inner3, div#a_inner4; the ancestor of div#b_inner4 Elements include: div#b, div#b_inner1, div#b_inner2, div#b_inner3.
Then analyze their ancestral elements that have dynamic positioning: div#a_inner5's ancestral elements that contain dynamic positioning are: div#a, div#a_inner3; div#b_inner4's ancestral elements that contain dynamic positioning are: div# b_inner3.
Then take out the highest level to compare: div#a > #div#b_inner3.