大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > relative absolute无法冲破的等级问题解决第1

relative absolute无法冲破的等级问题解决第1

关键词:cssrelativeabsolute  阅读(458) 赞(12)

[摘要]本文是对relative absolute无法冲破的等级问题解决第1/3页的讲解,对学习CSS编程技术有所帮助,与大家分享。
前段工夫记得仿佛是谁在群里提出了一个真实是让大家都觉得很不了解的一个成绩: 
<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:100px; 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,并且属性都需求一样怎样办?当然我们不大会需求有这样的效果。但是我们需求有这样的效果:子级全部是隐藏的,当有鼠标反响时呈现并且浮在一切的内容之上。我们要晓得,这的确是件让人头疼的事,由于我们下面见识到了,子级在显示的时分都被压在了下一个父级标签的上面。上面我们来完成一下这个鼠标反响的定位效果: 
<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>  
我们经过链接的鼠标事情来完成这个显示隐藏效果: 
*{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;} 


相关评论