[Browsers participating in the test: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[Operating system: Windows]
It seems that many students are obsessed with the problem of why this div is on the upper layer and that div is on the lower layer, and no matter how they set the z-index, they can't get to the top. They suffer from vomiting and diarrhea, nausea and insomnia, and end up depressed. Feel free to use layer overlays. However, the superposition effect of layers appears frequently in interaction design, so we must control it. To control it, we must master its laws.
First, clarify a few concepts that need to be used in this article :
Note: These concepts are customized by the author and are used in this article only.
Quote:
The peer element is a very key word and needs to be explained in detail here.
In this example, div#a and div#b are not "sibling elements". Only elements like div#b and div#c that have the same parent div#f can be called "sibling elements".
Endof quote
Let’s take a look at these five rules :
Rule 1: When sibling elements are positioned in the same way and there is no z-index setting, the html will be placed on top of the latter.
Run code box
[Ctrl+A select all tips: you can modify some code first]
Rule 2: When sibling elements are both dynamically positioned and have z-index settings, the one with the larger z-index value will come first.
Run code box
[Ctrl+A All selection tips: You can modify part of the code first]
Rule 3: When sibling elements are positioned in different ways, dynamically position them at the top.
Run code box
[Ctrl+A All selection tips: You can modify part of the code first]
Rule 4: When non-sibling elements, any one of them and its ancestor element do not have dynamic layout, the html will take precedence.
Run code box
[Ctrl+A select all tips: you can modify some code first]
Rule 5 : [Important] When any one of the non-sibling elements or its ancestor element has dynamic positioning, search upwards for the dynamically positioned ancestor element at the same time, and take out the highest-level ancestor element (or itself) for comparison. .
Case 1: No matter how big the z-index of the child element is, the larger parent element will come first.
Case 2: The parent element is placed at the bottom, and the child element can also be placed at the top.
Case 1 and case 2 are combined with extended comparison.
Run code box
[Ctrl+A All selection tips: You can modify part of the code first]
Quote:
In fact, the first four points are the basics, only the fifth point is more difficult to understand. Here is a detailed explanation:
In this example, we compare the cascading relationship between div#a_inner5 and div#b_inner4.
Up to the next level of the ancestor element div#ab they share, 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 the elements with dynamic positioning among their ancestor elements: the elements with dynamic positioning among the ancestor elements of div#a_inner5 are: div#a, div#a_inner3; the elements with dynamic positioning among the ancestor elements of div#b_inner4 are: div# b_inner3.
Then take out the highest level for comparison: div#a > #div#b_inner3.
When the parent element is at the bottom and the child element can also be at the top, the non-sibling element is used. 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 position of html. .
End of quote
Of course, sometimes there are special cases, such as flash and select in IE6 that cannot be covered. These are abnormal situations. You can search for relevant articles yourself.