定位

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

1. 常规流
2. 浮动
3. 定位

定位：手动控制元素在包含块中的精准位置

涉及的CSS属性：position

position属性：

1. 默认值：static，静态定位（不定位）
2. relative：相对定位
3. absolute：绝对定位
4. fixed：固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。

定位元素会脱离文档流（相对定位不会）

一个脱离了文档流的元素：

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

相对定位relative

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。

可以通过四个CSS属性对其设置位置：

1. left
2. right
3. top
4. bottom

盒子的偏移不会对其他盒子产生影响

绝对定位absolute

1. 宽高为auto，适应内容
2. 包含块变化：找祖先中第一个定位元素，该元素的填充盒padding为其包含块。
   若找不到，则它的包含块为整个网页（初始化包含块）
3. 父相子绝

固定定位fixed

其他情况和绝对定位完全一样。

包含块不同：固定为视口（浏览器的可视窗口）

定位下的居中

某个方向居中：

1. 定宽（高）
2. 将左右（上下）距离设置为0
3. 将左右（上下）margin设置为auto

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

上下左右全设0，margin：auto可以在正中心

多个定位元素重叠时

堆叠上下文

设置z-index，通常情况下，该值越大，越靠近用户

只有定位元素设置z-index有效

z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

补充

绝对定位、固定定位元素一定是块盒

绝对定位、固定定位元素一定不是浮动（float会变成none）

没有外边距合并