position:relative/absoluteThe level that cannot be broken_Experience exchange

Note: The examples in this article may not be displayed under IE5.x. Please use IE6, IE7, Firefox, Opera and other browsers to debug!
Some time ago, I remember someone asked a question in the group that really made everyone confused:

Copy code The code is as follows:

• First block


• Second block
  
• Third block


• Fourth block


• Fifth block

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 behind the parent. under.

Copy code The 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:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/css"> /*<![CDATA[*/ *{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:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;} /*]]>*/ </style> <ul> <li>First block</li> <li><span>Second block</span></li> <li>Third block</li> <li>Fourth block</li> <li>Fifth block</li> </ul>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]

Tip: You can modify part of the code first and then run
Try it. It is easy to find our children. The z-index value reaches 1000 and is set to position:absolut; the children are all archived in the parent. under. 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.
Perhaps you may think of it this way: Wouldn't it be nice to just set position:relative; for the LI with span? 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:

Copy code The code is as follows:

• First block


• Second block


• Third block


• The fourth block


• The fifth block

We use the link Use mouse events to complete this show-hide effect:

Copy code The 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; }

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/css"> /*<![CDATA[*/ *{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; } /*]]>*/ </style> <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>
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

    提示：您可以先修改部分代码再运行
我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性，然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果，我们会发现，所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢，其实以CSS想强行突破是不太可能，所以我们反过来想，能不能让这个没有被触发的父级标签没有position:relative;属性，而只是触发的时候才有级这个父级赋上这样的值？其实想到这里基本上已经可以解决所有的问题了：

复制代码 代码如下:

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/css"> /*<![CDATA[*/ *{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; } /*]]>*/ </style> <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>
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]

    提示：您可以先修改部分代码再运行
我们只要针对a:hover来设定其属性为position:relative;就可以了，这样只有在鼠标触发的时候A才会被赋于一个相对定位的属性。这样就完成可以解决被其它父级标签所挡的尴尬了。
当然如果不介意IE6或是IE5.X这样的浏览器我们还可以把代码再做简化：

复制代码 代码如下:

• First block


• Second Block


• The third block


• The fourth block
• The fifth block

CSS can be changed to this:

Copy code The code is as follows:

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-CN"> <title></title> <style type="text/CSS"> *{margin:0; padding:0; list-style:none;} li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left;} 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; } </style> <ul> <li><span>First block</span></li> <li><span>Second block</span></li> <li><span>The third block</span></li> <li><span>The fourth block</span></li> <li><span>The fifth block</span></li> </ul>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before it can be executed]

Tip: You can modify some codes first and then run
Original reading:
http://andymao.com/andy/post/67.html