展会信息港展会大全

position:relative absolute无法冲破
来源:互联网   发布日期:2016-03-25 16:26:15   浏览:2437次  

导读:前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:<ul><li>第一块</li><li><span>第二块</span></li><li>第三块</l...

前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:

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

Source Code to Run [www.111cn.net]

/**/

第一块

第二块

第三块

第四块

第五块

试一下很容易发现我们的子级,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,并且属性都需要一样怎么办?当然我们不大会需要有这样的效果。但是我们需要有这样的效果:子级全部是隐藏的,当有鼠标反应时出现并且浮在所有的内容之上。我们要知道,这确实是件让人头疼的事,因为我们上面见识到了,子级在显示的时候都被压在了下一个父级标签的下面。

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港