开发杂记:z-index的那些坑

by kevin 22. 十月 2013 13:58 >
要实现my cart那样的边框效果,很自然的想到 上面一个div, 下面一个div, 上面那个div的z-index比下面的这个大, 下面这个div往上移1px。 然后,悲剧就开始了。。。 总结了一下,基本上是以下几个坑: z-index 仅能在定位元素上奏效,就是要求该元素设置 position:xxxx,否则z-index无效。 如果元素内嵌于li,那么li需要设置 position:relative 上面的div需要设置background,否则无法遮住下面的div 主要代码如下: 1: <li style="position:relative" id="cart" > 2: <div style="width: 100px; height:23px; position: relative; z-index: 2; background-color: white; border: 1px solid #d3d3d3;"></div> 3: <div style="position: absolute; width: 100px; z-index: 1; top: 22px; background-color: white; border: 1px solid #d3d3d3; "> 4: </div> 5: </li>

打赏请我喝果汁咯

支付宝 微信

关于我

80后,单身,平庸的程序员。

喜欢看书,乐于交友,向往旅游。

遇建Kevin

FluentData交流群:477926269

Fluentdata