定位(position)

定位

一个元素，只要position的取值不为static，认为该元素是一个定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：

1. 文档中的元素摆放时，会忽略脱离了文档流的元素
2. 文档流中计算自动高度时，会忽略脱离了文档流的元素

相对定位

不会脱离文档流，在原来位置进行偏移，盒子的偏移不会对其他盒子造成任何影响

绝对定位

1. 宽度为auto，适应内容
2. 包含块变化：找祖先中最近的定位元素，该元素的填充盒(padding盒)为其包含块。若找不到，则它的包含块为整个网页（初始包含块）

初始包含块（initial containing block）。对于浏览器而言，初始包含块的的大小等于视口 viewport 的大小，基点在画布的原点（视口左上角）。

固定定位

其他情况与绝对定位一致
包含块不同：固定为视口（浏览器的可视窗口）

粘性定位

粘性定位和相对定位的特点基本一致，不同的是:粘性定位可以在元素到达某个位置时将其固定。

• 粘性项目：设置position：sticky的元素，并且有一个位置属性如top：0；
• 粘性容器：自动定义了父元素为粘性容器，父元素具有overflow：hidden；粘性定位会失效

定位下的居中

.position-center {
    position: absolute;
    /* position: fixed;*/
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 500px;
    height: 500px;
}

.position-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%,-50%); // 相对于元素宽高
}

绝对定位和固定定位，margin为auto时，会自动吸收剩余空间

对各定位元素重叠时

堆叠上下文
设置z-index，只有定位元素设置有效
z-index为负数时，会被常规流，浮动元素覆盖

补充

• 没有外边距合并
• 绝对定位与固定定位会取消浮动，相对定位与粘性定位不会。