css：
.parent{
        width: 500px;
        height: 500px;
        background: red;
        position: absolute;
    }
    .child1{
        width: 200px;
        height: 200px;
        background: yellow;
        position: absolute;
        left: 50px;
        top: 50px;
    }
    .child2{
        width: 200px;
        height: 200px;
        background: blue;
        position: absolute;
        left: 80px;
        top: 80px;
  }

显示：

给child1加z-index属性：

显示：

如果给child2添加属性z-index：5；那么蓝色块就会在黄色块之上了，因为child2的z-index属性的值大于child1的z-index属性的值

如果想让红色块显示在最上面，只需将child1和child2的z-index属性值设置为负数即可；如果给parent设置z-index属性的值大于两个child的z-index属性的值并不会发生变化

parent的z-index属性的值大于child的z-index的属性的值：

两个child的z-index属性的值为负：（这里在设置两个child的z-index属性的值得时候，parent不能设置任何的z-index值）

如果child1的z-index属性的值为1，child2的z-index属性的值为-1，不设置parent的z-index属性，显示如下：

再来，

html：
<div class="parent1">
    <div class="child1"></div>
    
</div>
<div class="parent2">
    <div class="child2"></div>
</div>

css：
.parent1{
        width: 500px;
        height: 500px;
        background: red;
        position: absolute;
    }
    .parent2{
        width: 400px;
        height: 400px;
        background: pink;
        position: absolute;
    }
    .child1{
        width: 200px;
        height: 200px;
        background: yellow;
        position: absolute;
        left: 50px;
        top: 50px;
    }
    .child2{
        width: 200px;
        height: 200px;
        background: blue;
        position: absolute;
        left: 50px;
        top: 50px;    
    }

显示：

如果给child1添加z-index属性，显示：

只是child1显示在了上面，parent1并没有显示在parent2之上，

如果给parent1添加z-index属性，显示：

优质内容筛选与推荐>>
1、从zepto中学习方法
2、RealVnc-- fullscreen
3、在做Android开发的，如何去掉滚动view在尽头时的阴影效果
4、黑盒测试用例设计方法
5、cordova开发环境搭建

赞赏

长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

阅读

好看

已推荐到看一看

你的朋友可以在“发现”-“看一看”看到你认为好看的文章。

取消 推荐

我知道了

已取消，“好看”想法已同步删除

知道了