CSS堆叠顺序（z-index）

在使用「定位」布局时，可能会「出现盒子重叠的情况」。

加了定位的盒子，默认「后来者居上」， 后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以「调整盒子的堆叠顺序」。如下图所示：

z-index的特性如下:

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

2. 如果属性值相同，则按照书写顺序，后来居上；

3. 数字后面不能加单位

4. z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位(position)的扩展 

绝对定位的盒子居中

绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中 在使用绝对定位时要想实现水平居中，可以按照下面的方法：

1. left : 50%:让盒子的左侧移动到父级元素的水平中心位置；

2. margin-left: -100px;让盒子向左移动自身宽度的一半。

3. 同理垂直居中。

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。