Some time ago, it seemed like who was in the group who put forward a question that is really so incomprehensible to all of us:
Copy Code code as follows:
<ul>
<li> First Block </li>
<li><span> Second block </span></li>
<li> Third Block </li>
<li> Fourth Block </li>
<li> Fifth block </li>
</ul>
If I we set Li as position:relative; set span to Position:absolute, then we find that regardless of the Z-index value set for the span, it will always be below the parent.
Copy Code code 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;}
Try it. It's easy to find out our children, the value of Z-index is up to 1000 of the set Position:absolut, and the children are all under the parent. I think for a long time, I think the fundamental problem is: Set the same position:relative/absolute, the level between the sibling tag is not z-index beyond. The first Li in our example is always smaller than the later one, so we set the Position:absolute in the children of Li, and we give a very high z-index value.
You might think this way: just set position:relative for Li with span. Very correct. When the other Li does not set the position:relative, then the child we need can float on top of all the content. But what if, in fact, all the Li has spans, and the attributes all need the same? Of course, we do not need to have such an effect. But we need to have this effect: The children are all hidden, appearing when the mouse reacts and floating over all the content. We need to know that this is a really frustrating thing, because we've seen that children are pressed under the next parent tag when they are displayed. Here's what we can do to achieve this mouse response:
Copy Code code as follows:
<ul>
<li><a href= "" title= "" ><span> first block </span></a></li>
<li><a href= "" title= "" ><span> second block </span></a></li>
<li><a href= "title=" "><span> third block </span></a></li>
<li><a href= "" title= "" ><span> fourth block </span></a></li>
<li><a href= "" title= "" ><span> Fifth block </span></a></li>
</ul>
We do this by linking the mouse event to this display hidden effect:
Copy Code code 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;}
Current 1/3 page
123 Next read the full text
