Solution to the level problem that relative absolute cannot break through_Experience exchange

if we set li to position: relative; set span to position: absolute; then we will find that no matter how high the z-index value of span is set, it will always be below the parent behind it.

some time ago, i remember who asked a question in the group that really made everyone confused:

<ul>
<li>第一块</li>
<li><span>第二块</span></li>
<li>第三块</li>
<li>第四块</li>
<li>第五块</li>
</ul>

if we set li to position:relative ;set span to position:absolute; then we will find that no matter how high the z-index value of span is set, it will always be below the parent behind it.

*{margin:0; padding:0; list-style:none;}
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}
li span {width:200px; height:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}

it is easy to find our children by trying it. the z-index value reaches 1000 and is set to position:absolut; the children are all filed under the parent. i thought about it for a long time, and i think the fundamental problem is: setting the same position: relative/absolute; the level between labels of the same level cannot be surpassed by z-index. in our example above, the level of the first li will always be smaller than the level of the next li, so we set position:absolute; on the children in li, giving a very high z-index value.

maybe you will think about it: as long as you set position: relative; very correct. when no other li sets position:relative; then the child we need can float above all content. but what if, in fact, span is required in all lis, and all properties need to be the same? of course we don't necessarily need this effect. but we need to have such an effect: all children are hidden, appear when there is a mouse reaction and float above all content. we need to know that this is indeed a headache, because as we saw above, the children are pressed under the next parent label when displayed. let's implement the positioning effect of this mouse response:

<ul>
<li><a href="" title=""><span>第一块</span></a></li>
<li><a href="" title=""><span>第二块</span></a></li>
<li><a href="" title=""><span>第三块</span></a></li>
<li><a href="" title=""><span>第四块</span></a></li>
<li><a href="" title=""><span>第五块</span></a></li>
</ul>

we complete this display-hide effect through the linked mouse event:

*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;}
li a:hover {background:#000000;}
li span {display:none;}
li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}

we set a to position:relative ;in this way, its children will be positioned based on the upper left corner of the parent as the coordinate origin. then we set the specific shape and positioning properties of the span, and then hide it. we then use a's pseudo-class:hover to activate span. if we look at the results, we'll see that everything that should be on top is now on the bottom. so how do we solve this problem? in fact, it is impossible to force a breakthrough with css, so we think about it, can we make the parent tag that has not been triggered not have the position:relative; attribute, but only when it is triggered? assign such a value to this parent? in fact, thinking of this can basically solve all the problems:

*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {display:block; height:100px; width:100px; background:#000;}
li a:hover {position:relative; z-index:1; }
li span {display:none;}
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

we only need to set the attribute of a:hover to position:relative;, so that a will be assigned a relative positioning attribute only when the mouse is triggered. this completes the problem of being blocked by other parent tags.

of course, if you don’t mind browsers like ie5, we can also simplify the code:

<ul>
<li><span>第一块</span></li>
<li><span>第二块</span></li>
<li><span>第三块</span></li>
<li><span>第四块</span></li>
<li><span>第五块</span></li>
</ul>

the css can be changed to this:

*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}
li:hover {position:relative; z-index:1;}
li span {display:none;}
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

additional:
the article "position: relative/absolute cannot break through the level" published some time ago talked about the level in positioning. when i read it again in the past few days, i found that the article was not thorough and did not point to the key point. therefore, i would like to make a special supplement here in the hope that the levels in position can be explained more clearly and explicitly.

we all know that position has four different values, namely: static | absolute | fixed | relative. this is explained in su yu's "css2 chinese manual": static: no special positioning, the object follows html positioning rules; absolute: drag the object out of the document flow, use left, right, top, bottom and other attributes to make absolute position. and its cascading is defined through the z-index attribute. at this time, the object does not have margins, but there are still padding and borders; relative: the object cannot be stacked, but will be offset in the normal document flow based on attributes such as left, right, top, bottom, etc.; fixed: ie5.5 and ns6 are not yet available this property is not supported.

but to change the stacking position of an object, you need another css property: z-index. but this z-index is not omnipotent. it is restricted by the html code level. z-index can only reflect its effect on html of the same level. what needs to be stated here is that z-index can only be used when the position value of the object is relative/absolute. below we will give some examples to explain the characteristics of levels:

<p id="box_1">
<p id="a">这是第一个块</p>
<p id="b">这是第二个块</p>
</p>

for the above html code, we also need to write a css to define it:

#a,#b {position:absolute; width:300px; height:100px; }
#a {z-index:10; left:0; top:0; background:#000; }
#b {z-index:1; left:20px; top:20px; background:#c00; }

this is the most common in this case, the stacking level of #a and #b can be set through z-index. this is not asked, so under what circumstances will problems arise? let’s look at another example:

<p id="box_1">
<p id="a">这是第一个块</p>
</p>
<p id="box_2">
<p id="b">这是第二个块</p>
</p>

write another css based on this structure. pay attention to the different places in this css:

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; z-index:100; }
#b {background:#0c0; z-index:1; left:50px;}

at this time we see, no matter #a is set to no matter how high the value is, it cannot exceed #b, so z-index cannot break through the level of html. it must be at the same level before it can exert its power. so how to solve this problem? i can think about it the other way around. , the order between cousins ​​cannot be reorganized, why not reorganize the level of the parents? so we add a z-index: 100; to the css of #box_1 and z-index: 1; to the css of #box_2. let’s take a look at the effect again:

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#box_1 {z-index:100;}
#box_2 {z-index:1;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; }
#b {background:#0c0; left:50px;}