定位相关属性

在CSS中提供了一些用于设置对象位置的属性，通过这些属性可指定对象的定位方式、层叠顺序，以及与其父对象顶部、底部、左侧和右侧的距离。

CSS中提供了用于设置定位方式的属性——position
position属性的语法格式如下：position:static / absolute / fixed / relative;

• static：无特殊定位，对象遵循HTML定位规则。在使用该属性值时，top、right、bottom和left等属性设置无效
• absolute：绝对定位，使用top、right、bottom和left等属性指定绝对位置。使用该属性值可以让对象漂浮于页面之上
• fixed：固定定位，且对象位置固定，不随滚动条移动而改变位置
• relative：相对定位，遵循HTML定位规则，并由top、right、bottom和left等属性决定对象的位置

position属性

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

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

相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移
盒子的偏移不会对其他盒子造成任何影响

绝对定位

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

固定定位

其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）

定位下的居中

某个方向居中：

1. 定宽（高）
2. 将左右（上下）距离设置为0
3. 将左右（上下）margin设置为auto
   
   绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
   

多个定位元素重叠时(堆叠上下文)

设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

补充

• 绝对定位(absolute)、固定定位(fixed)元素一定是块盒
• 绝对定位(absolute)、固定定位(fixed)元素一定不是浮动
• 没有外边距合并