Relative absolute can not break through the level of problem solving _ experience Exchange

If we set Li to Position:relative; set span to Position:absolute, then we will find that regardless of whether the z-index value of span is set higher, it will always be below the back parent.

Some time ago remember who in the group put forward a really is to let everyone feel very not understanding of a problem:

<ul>   <li> First block </li>   <li><span> second block </span></li>   <li> Block three </li>   <li> fourth </li>   <li> fifth block </li>   </ul>

If we set Li to Position:relative; set span to Position:absolute, then we will find that regardless of whether the z-index value of span is set higher, it will always be below the back parent.

*{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 to find our children easily, the value of Z-index reached 1000 is set Position:absolut, the children are under the parent level. I think for a long time, I think the fundamental problem is: Set the same position:relative/absolute, the level between the sibling tags is not z-index beyond. The first Li level in our example is always less than the next Li level, so we set the Position:absolute on the children of Li and 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 above all the content. But what if, in fact, all Li has a span and the attributes need to be the same? Of course we do not need to have this effect in general. But we need to have this effect: The children are all hidden, and when there is a mouse reaction, it appears and floats on top of all the content. We need to know that this is really a headache, because we have seen that the child is pressed under the next parent tag when it is displayed. Let's implement the positioning effect of this mouse response:

<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 events to show the hidden effect:

*{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 so that his child will be positioned based on the upper-left corner of the parent as the origin of the coordinates. We then set the specific shape of the span and the positioning properties, and then hid him. We then pass a pseudo-class: hover makes span active. Let's look at the results and we'll find out that all that should be on top now is all below. Then how do we solve this problem, in fact, CSS to force a breakthrough is not possible, so we think, can we not be triggered by the parent tag is not position:relative, property, but only when the trigger is the level of the parent to assign such a value? In fact, I think that this basically can 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; }

All we have to do is set its properties to position:relative for a:hover, so that a is only assigned to a relatively positioned property when the mouse is triggered. This completes the embarrassment that can be solved by other parent tags.

Of course, if you don't mind IE5 such a browser, we can also simplify the code:

<ul>   <li><span> First block </span></li>   <li><span> second block </span> </li>   <li><span> Third block </span></li>   <li><span> fourth block </span> </li>   <li><span> Fifth block </span></li>   </ul>

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; }

Add:
Some time ago published the "Position:relative/absolute can not break through the level" article, said the positioning of the grade, these days to look at the time to find the text is not thorough, not pointing to the key. So, in particular, I would like to add a little more clarity and clarity to the hierarchy in position.

As we all know, the position has four different values, namely: static | Absolute | Fixed | Relative This is explained in 苏昱彰eight's CSS2 Chinese Handbook: Static: No special positioning, objects follow HTML positioning rules, Absolute: Drag objects out of the document stream, and use attributes such as left,right,top,bottom for absolute positioning. And its cascade is defined by the Z-index property. At this point the object does not have margins, but it still has padding and borders; Relative: objects are not stackable, but they are offset in normal document flow based on attributes such as Left,right,top,bottom, fixed:ie5.5 and NS6 do not yet support this property.

But to change the stacking position of an object requires another CSS property: Z-index. But the z-index is not omnipotent, and he is constrained by the level of the HTML code. Z-index can only embody his role in the same level of HTML. What you need to declare here is that Z-index can only be used if the position value of the object is Relative/absolute. Let's take a few examples to explain the characteristics of the hierarchy:

<p id= "Box_1" >   <p id= "A" > This is the first block </p>   <p id= "B" > This is the second block </p>   </p>

For this HTML code above, 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 cascade level of #a and #b can be set by Z-index. This is not asked, then what kind of situation will be the problem? Let's look at one more example:

<p id= "Box_1" >   <p id= "A" > This is the first block </p>   </p>   <p id= "box_2" >   <p id= "B" > This is the second block </p>   </p>

To write a 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 how big the value of #a, he can not exceed #b, so that Z-index is unable to break through the level of HTML, he must be the same level of State to play the power. So how to solve this problem? I can think in turn that the order between cousins cannot be reorganized, Why not make a reorganization of your parents ' hierarchy? So we add a z-index:100 to the #box_1 CSS; Add Z-index:1 to the #box_2 CSS, and then look at the effect:

#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;}

