定位
一个元素,只要position的取值不为static,认为该元素是一个定位元素
定位元素会脱离文档流(相对定位除外)
一个脱离了文档流的元素:
- 文档中的元素摆放时,会忽略脱离了文档流的元素
- 文档流中计算自动高度时,会忽略脱离了文档流的元素
相对定位
不会脱离文档流,在原来位置进行偏移,盒子的偏移不会对其他盒子造成任何影响
绝对定位
- 宽度为auto,适应内容
- 包含块变化:找祖先中最近的定位元素,该元素的填充盒(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为负数时,会被常规流,浮动元素覆盖
补充
- 没有外边距合并
- 绝对定位与固定定位会取消浮动,相对定位与粘性定位不会。