SOURCE

<h2>七阶层叠水平</h2>
<div class="l l1">层叠上下文(background/border)</div>
<div class="l l2">负z-index</div>
<div class="l l3">block块状水平盒子</div>
<div class="l l4">float浮动盒子</div>
<div class="l l5">inline，inline-block水平盒子</div>
<div class="l l6">z-index:auto或堪称z-index:0<br/>不依赖于z-index的层叠上下文</div>
<div class="l l7">正z-index</div>

<h2>demo</h2>

<div class="dl1">
    <div class="dl2">负z-index</div>
    <div class="dl3">block块状水平盒子</div>
    <div class="dl4">float浮动盒子</div>
    <div class="dl5">inline，inline-block水平盒子</div>
    <div class="dl6">z-index:auto或堪称z-index:0<br/>不依赖于z-index的层叠上下文<</div>
    <div class="dl7">正z-index</div>
    层叠上下文(background/border)
</div>

.l {
    width: 250px;
    height: 50px;
    color: #fff;
    padding: 10px;
    margin-top: -10px;
}

.l1 {
    background: plum;
}

.l2 {
    background: purple;
    margin-left: 30px;
}

.l3 {
    background: blue;
    margin-left: 60px;
}

.l4 {
    background: green;
    margin-left: 120px;
}

.l5 {
    background: yellowgreen;
    margin-left: 180px;
}

.l6 {
    background: orange;
    margin-left: 210px;
}

.l7 {
    background: red;
    margin-left: 270px;
}

.dl1 {
    width: 500px;
    height: 200px;
    background: plum;
    border: gainsboro 10px solid;
    position: relative;
    /*创建层叠上下文*/
    z-index: 0;
    /*创建层叠上下文*/
}

.dl2 {
    z-index: -1;
    position: relative;
    background: purple;
    color: #fff;
}

.dl3 {
    background: blue;
}

.dl4 {
    float: left;
    background: green;
}

.dl5 {
    display: inline-block;
    background: yellowgreen;
}

.dl6 {
    background: orange;
    position: relative;
}

.dl7 {
    background: red;
    position: relative;
    z-index: 1;
}