在制作网页中，该如何解决z-index属性的失效情况？

请注意：本文重在讨论z-index问题，所以没有编辑关于具体的样式呈现代码。

关于z-index属性，我在前面的博客里总结了它的使用方法。不过，在实操中对它又有了不同的认识。

• 以某东购物车为例：
  
  我们需要实现当它hover的时候，下面出现二级框：
  
  那我们要实现它呢，在z-index方面：
• 要是以平时，大框嵌套二级框，作为它的父元素，用相对定位position:relative定义原框，用position:absolute定义二级框，要让二级框覆盖在下面，定义z-index:-1即可。

 .div{
 position:relative;
 }
 .div>.div{
 position:absolute;
 z-index:-1;
  top: 36px;
 right:40px;
 }

记得绝对定位要和top,bottom,left,right一起用
这样就可以实现了。

• 不过在做网页时，你需要考虑整体的效果。之前提到过越后面出现的元素，它的图层越高。那么，势必会造成你在做下面的页面时，我的购物车这个二级框会被覆盖掉的。

• 那么该怎么解决？
  简单，把 .div>.div的图设置大点就好了，比如说 z-index:1

• 你以为这样就实现了？
  我的购物车的二级框的确不会被下面的页面盖住了，可是它覆盖在了.div的上面。这说来也好解决，将.div的图层再设置大点，比如说： z-index：9，可是这样操作却没用了。

• 可能在于？
  比如说 .div>.div是一箱苹果，那么 .div就是那个放苹果的箱子。无论你把.div的图层设置多大，不过是端起箱子，苹果还在里面。在原例子中就是. .div>.div会一直覆盖在 .div上的。

• 那。。。到底该怎么实现？
  最最正确的方法就是：

1. 解除.div和.div>.div的父子关系
2. 将它们作为并列的关系，同为一个 <div>下的两个并列的框

 .div{
 position:relative;
 }
  /*外面包的框*/
 .div>.div-one{
 position:absolute;
 z-index:9;
 right:40px;
 top:0;
 }
 /*我的购物车*/
 .div>.div-two{
 position:absolute;
 z-index:-1;
 top: 36px;
 right:40px;
 }
  /*我的购物车下面的二级框*/

这样就可以实现了。

所以呢，不换做什么都要开拓思维，多思考，往往都是小问题影响全局。

希望带给你们实质性的帮助。