关于相对定位与绝对定位无法冲破的等级的解决方法
最近项目中遇到一个实在是让大家都觉得很不理解的一个问题：
<ul>
<li>第一块</li>
<li><span>第二块</span></li>
<li>第三块</li>
<li>第四块</li>
<li>第五块</li>
</ul>
如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。
*{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;}
试一下很容易发现我们的子级，z-index的值达到了1000的被设定了position:absolut;子级都被档在了父级的下面。我想了很久，我觉得其根本问题是：设置同样的position:relative/absolute;同级标签之间的等级是无法用z-index超越的。我们上面的例子中的第一个LI的等级永远都要小于后一个LI的等级，所以我们在LI里的子级身上设置了position:absolute;，给了非常高的z-index值。
也许你会这样来想：只要针对有span的LI设置position:relative;不就好了吗？非常正确。当其它的LI都不设置position:relative;那么我们需要的那个子级就可以浮在所有的内容之上。但是如果实际上，所有的LI中都要有span，并且属性都需要一样怎么办？当然我们不大会需要有这样的效果。但是我们需要有这样的效果：子级全部是隐藏的，当有鼠标反应时出现并且浮在所有的内容之上。我们要知道，这确实是件让人头疼的事，因为我们上面见识到了，子级在显示的时候都被压在了下一个父级标签的下面。下面我们来实现一下这个鼠标反应的定位效果：
代码
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="author" content="庞淦...">
<meta name="keywords" content="关键字...">
<meta name="description" content="网站描述...">
<meta name="robots" content="all" />
<title>深圳市美赛达科技有限公司</title>
<style type="text/css">
html,body,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
li {height:100px; margin:5px; 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>
</head>
<body>
<ul>
<li><a href="#"><span>标题描述信息1</span></a></li>
<li><a href="#"><span>标题描述信息2</span></a></li>
<li><a href="#"><span>标题描述信息3</span></a></li>
<li><a href="#"><span>标题描述信息4</span></a></li>
</ul>
</body>
</html>
效果图：
我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性，然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果，我们会发现，所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢，其实以CSS想强行突破是不太可能，所以我们反过来想，能不能让这个没有被触发的父级标签没有position:relative;属性，而只是触发的时候才有级这个父级赋上这样的值？其实想到这里基本上已经可以解决所有的问题了：
请看对照看关键代码：
方法1：
li a { display:block; height:100px; width:100px; background:#000;}
li a:hover {background:#000000;position:relative; z-index:1;}
方法2：
li {height:100px; margin:5px; float:left; width:100px;}
li a { 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; margin-top:0;margin-left:100px; z-index:1000; }
去掉父层的相对定位，子层用绝对定位用margin-left margin-top;
方法3:(不推荐)
代码
1 <!DOCTYPE html>
2 <head>
3 <meta charset="utf-8" />
4 <meta name="author" content="庞淦...">
5 <meta name="keywords" content="关键字...">
6 <meta name="description" content="网站描述...">
7 <meta name="robots" content="all" />
8 <title>深圳市美赛达科技有限公司</title>
9 <style type="text/css">
10 html,body,ul,li{margin:0;padding:0;}
11 ul,li{list-style:none;}
12 li {height:100px; margin:5px; float:left; width:100px;}
13 li a { display:block; height:100px; width:100px; background:#000;}
14 li a:hover {background:#000000;}
15 li span {display:none;}
16 li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000; }
17 .fa{display:block;position:relative; z-index:1;font-style:normal}
18 </style>
19 </head>
20 <body>
21 <ul>
22 <li><a href="#"><em class="fa"><span>标题描述信息1</span></em></a></li>
23 <li><a href="#"><em class="fa"><span>标题描述信息2</span></em></a></li>
24 <li><a href="#"><em class="fa"><span>标题描述信息3</span></em></a></li>
25 <li><a href="#"><em class="fa"><span>标题描述信息4</span></em></a></li>
26 </ul>
27 </body>
28 </html>
三个解决方法效果如下：
效果图：
