z-index

z-index

  当使用定位时，会发现可能会有交叠的情况，一般是"后来居上"，写在后面的会覆盖前面的，假设下面有两个盒子

<div class="top"></div>
<div class="bottom"></div>

div {
    width: 200px;
    height: 200px;
    position: absolute;
}
.top {
    background-color: red;
}
.bottom {
    background-color: green;
}

  我们发现绿色的盒子已经盖住了红色的盒子，那么如何使得红色的盒子在上面，答案是设置它的z-index值，默认的z-index值是0,所以只要设置红色盒子的z-index值大于0即可,注意不要加单位

z-index: 1;

  这时红色的盒子已经来到了上层，覆盖住了绿色的盒子。

  这里需要注意，只要相对定位，绝对定位，固定定位才有z-index。