Relative absolute level issues that cannot be broken through solution page 1/3

Some time ago, I remember who raised a question in the group that was really hard for everyone to understand: Copy codeThe Code is as follows: <ul>
<Li> first </li>
<Li> <span> second </span> </li>
<Li> Part 3 </li>
<Li> block 4 </li>
<Li> fifth </li>
</Ul>

If I 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, it will always be under the parent level.Copy codeThe Code is as follows: * {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 that the value of z-index reaches 1000 and the position: absolut is set. The sub-level is under the parent level. After thinking for a long time, I think the fundamental problem is: setting the same position: relative/absolute; the levels between labels of the same level cannot be surpassed by z-index. In the above example, the first LI level is always smaller than the last LI level, so we set the position: absolute ;, given a very high z-index value.

Maybe you will think like this: as long as you set position: relative for LI with span, isn't that all right? Very correct. When no other LI sets position: relative; then the child level we need will be able to float above all the content. But what if in fact all LI has a span and the attributes must be the same? Of course, we do not need this effect. However, we need to have the effect that all sub-levels are hidden. When there is a mouse reaction, it appears and floats above all the content. We need to know that this is indeed a headache, because we have seen that the child level is under the next parent level label when it is displayed. Next we will implement the positioning effect of this mouse reaction:Copy codeThe Code is as follows: <ul>
<Li> <a href = "" title = ""> <span> first </span> </a> </li>
<Li> <a href = "" title = ""> <span> second </span> </a> </li>
<Li> <a href = "" title = ""> <span> third </span> </a> </li>
<Li> <a href = "" title = ""> <span> fourth </span> </a> </li>
<Li> <a href = "" title = ""> <span> fifth </span> </a> </li>
</Ul>

We use the linked mouse event to display the hidden effect:Copy codeThe Code is as follows: * {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 ;}