Position:relative/absolute cannot break through the ranks

Some time ago, it seems that someone has put forward a question which is really so incomprehensible to all of us:

1. • First Block
   • Second block
   • Third Block
   • Fourth Block
   • Fifth block

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.

1. *{margin:0; padding:0; list-style:none;}
2. Li {width:100px; height:100px; margin:0 5px 0 0; Background: #000; Float:left; position:relative; Z-index:1;}
3. 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:

1. • first block
   • second block
   • third block
   • fourth block
   • Fifth block

We do this by linking the mouse event to this display hidden effect:

1. *{margin:0; padding:0; list-style:none;}
2. Li {height:100px; margin:0 5px 0 0; Float:left; width:100px;}
3. Li a {position:relative; z-index:1; display:block; height:100px; width:100px; Background: #000;}
4. Li a:hover {background: #000000;}
5. Li span {width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000; display:none;}
6. Li A:hover span {display:block; background: #c00;}

We set a to position:relative so that his child is positioned at the coordinate origin based on the upper-left corner of the parent. Then we set the specific shape of span and the positioning attribute, and then hid it. We go through the pseudo class of a: hover makes span active. Let's look at the results and we'll find that all that should be on it is now all down. So how do we solve this problem, in fact, to the CSS to force a breakthrough is not likely, so we think in the opposite, can not be triggered by the parent tag is not position:relative attribute, but only the trigger when the level of this parent assigned such a value? In fact, thinking about this is basically enough to solve all the problems:

1. *{margin:0; padding:0; list-style:none;}
2. Li {height:100px; margin:0 5px 0 0; Float:left; width:100px;}
3. Li a {display:block; height:100px; width:100px; Background: #000;}
4. Li a:hover {position:relative; z-index:1;}
5. Li span {width:200px height:200px; background: #c00; position:absolute; top:0; left:100px; z-index:1000; display:none;}
6. Li A:hover span {display:block}

All we have to do is set its properties to position:relative for a:hover, so that only when a mouse is triggered, a is assigned a relative positioning attribute. This completes the embarrassment of being blocked by other parent tags.

Of course, if you don't mind IE5 browsers like this, we can simplify the code:

1. • First Block
   • Second block
   • Third Block
   • Fourth Block
   • Fifth block

CSS can be changed like this:

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