关注前端开发微信微信号web007007

z-index不生效的原因和解决方法

作者 管理员 发布时间 2012-09-28 12:22 文章分类 DIV&CSS 文章评论 2条评论 阅读次数

运行下面代码看看

<div style="z-index:4;width:560px;background-color:Aqua; ">不生效 <a href="http://www.web92.net">www.web92.net</a></div>
<div style="z-index:3;width:360px;background-color:Fuchsia; position:absolute;">有效 <a href="http://www.web92.net">www.web92.net</a></div>
<div style="width:760px;background-color:Silver;">底部</div>

效果如下:

不生效 www.web92.net
底部

Z-index 仅能在定位元素上生效,所以给div的style加上z-index:3的同时,要记得加上position:absolute;或者position:fixed;,才能生效。

本文固定链接: http://www.web92.net/742.html | WEB前端开发

该日志由 于2012年09月28日发表在 DIV&CSS 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: z-index不生效的原因和解决方法 | WEB前端开发
关键字:
【上一篇】
【下一篇】