css定位相关知识以及绝对定位盒子如何实现水平或垂直居中

一 定位的组成

网页布局中一般由三种布局机制构成，标准流（位于最底层），浮动（位于中间层）和定位（位于最上层）

此文主要介绍定位

定位一般由俩部分组成：定位模式+边偏移

边偏移有以下四种
定位模式有以下四种
这里需要注意绝对定位的移动位置基准有俩种情况，第一种是该元素的父级元素（或者父级的父级也可以）已经定位的情况下，那么该元素的移动位置以父元素为基准。第二种是如果该元素的父元素没有定位，那么该元素的移动位置以浏览器为基准。

所以一般使用绝对定位时有一个原则就是子绝父相

子绝父相——子级是绝对定位，父级要用相对定位

子元素使用绝对定位时，父级元素要使用相对定位的原因是要想保证然子元素在父元素内的某一个位置时，那么父元素要有定位模式。父元素的定位模式有俩种，一个是相对定位，另一个是绝对定位，如果父元素使用了绝对定位，那么就会出现完全脱标的效果，这样就会影响下面标准流的布局

示例
1 如下图代码所示，子绝父相，子元素使用了绝对定位，父元素使用相对定位。这样父元素就不会脱标，就不会影响下面标准流的黑盒子。
2 如下图代码所示，子元素使用了绝对定位，父元素也使用了绝对定位，那么父元素就会脱标，这样黑色标准流盒子就会上来

二 绝对定位的盒子实现水平或垂直居中

绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中，如果想实现水平居中需要使用如下方法
1 先通过边偏移 left: 50%;让盒子的左侧移动到父级盒子的中线位置
2 通过margin-left: -100px; (负号后面的值为盒子宽度的一半)让盒子像左移动自身宽度的一半
垂直居中于水平居中同理

三 堆叠顺序

在使用定位布局时，可能会出现盒子重叠的情况。而且在定位布局中，默认后来者上，后面的盒子会压住前面的盒子，这样就可以用z-index调整盒子的堆叠顺序

z-index的特性如下
1 属性值：正整数，负整数或0，默认是0，数值越大，盒子越居上
2 如果属性值相同，则后来者居上
3 数字后面不能加单位

只有用了相对定位，绝对定位和固定定位的盒子才可以使用z-index，z-index对于标准流，浮动和静态定位是无效的