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>