z-index

z-index:auto;不参与层级比较

z-index为负,则元素被普通文档流的元素覆盖。

父元素z-index大于临近元素时,无论子元素z-index多小,子元素的层级都大于临近元素。

.pre{
       150px;
       height:150px;
       position:relative;
       top:50px;
       left:50px;
       background:black;
       z-index:10;
       }
    .test2{
        100px;
        height:100px;
        position:absolute;
        top:50px;
        background:blue;
        z-index:1;
        }
    .bro{
        100px;
        height:100px;
        position:absolute;
        top:30px;
        background:red;
        z-index:5;
        }
</style>
</head>

<body>
<div class="pre">
<div class="test2"></div>
</div>
<div class="bro"></div>

代码结果如图所示,我的理解是,子元素的z-index是其父元素的z-index加上其本身的z-index.所以会有此结果。

原文地址:https://www.cnblogs.com/sunmarvell/p/8094715.html