脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → CSS/HTML → 经验交流 → css relative与absolute的等级问题

relative absolute无法冲破的等级问题解决第2/3页

 更新时间：2008年06月19日 20:43:25   作者：  
如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。

我们设定了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; }
  
       我们只要针对a:hover来设定其属性为position:relative;就可以了，这样只有在鼠标触发的时候A才会被赋于一个相对定位的属性。这样就完成可以解决被其它父级标签所挡的尴尬了。 

当然如果不介意IE5这样的浏览器我们还可以把代码再做简化： 
复制代码 代码如下:

<ul>  
<li><span>第一块</span></li>  
<li><span>第二块</span></li>  
<li><span>第三块</span></li>  
<li><span>第四块</span></li>  
<li><span>第五块</span></li>  
</ul>  

CSS可以改成这样：
复制代码 代码如下:

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

上一页123下一页阅读全文
您可能感兴趣的文章:

相关文章

最新评论