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

by kevin 22. 十月 2013 13:58 >

mycart

要实现my cart那样的边框效果,很自然的想到
上面一个div,
下面一个div,
上面那个div的z-index比下面的这个大,
下面这个div往上移1px。

然后,悲剧就开始了。。。

总结了一下,基本上是以下几个坑:

  1. z-index 仅能在定位元素上奏效,就是要求该元素设置 position:xxxx,否则z-index无效。
  2. 如果元素内嵌于li,那么li需要设置 position:relative
  3. 上面的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>
分享到: 更多