CSS 定位叠放次序（z-index）及 定位其他拓展

 定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序。

语法：

选择器 { z-index: 1; }

• 数值可以是正整数、负整或0，默认是auto，数值越大，盒子越靠上。
• 如果属性值相同，则按照书写顺序，后来居上。
• 数字后面不能加单位。
• 只有定位的盒子才有z-index属性。 

定位的其他拓展 

一、绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin: 0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

1. left: 50% 让盒子的左侧移动到父级元素的水平中心位置
2. margin-left: -100px 让盒子向左移动自身宽度的一半

<div class="box"></div>

.box {
    position: absolute;
    /* left 走 50% 即父容器的一半 */
    left: 50%;
    /* margin 负值 往左走 自己盒子宽度的一半 */
    margin-left: -100px;
    /* top 走 50% 即父容器的一半 */
    top: 50%;
    /* margin 负值 往上走 自己盒子长度的一半 */
    margin-top: -100px;
    width: 200px;
    height: 200px;
    back