定位

定位

定位：手动控制元素在包含块的精准位置
涉及属性：position

position

• 默认值： static，静态定位（不定位）
• relative ： 相对定位
• absolute ： 绝对定位
• fixed：固定定位

定位元素（position不为static）会脱离文档流（相对定位除外）
脱离文档流特点：

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

可以通过四个css属性设置其位置

• left
• right
• top
• bottom

相对定位

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

#box{
	position: relative;
	left: 100px;
}

绝对定位

• 宽高为auto，盒子尺寸适应内容
• 包含块变化：找祖先元素的第一个定位元素的填充盒（padding+content），若找不到包含块即为整个网页

固定定位

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

定位下的居中

某个方向上居中
1）定宽（高）
2）左右（上下）为0
3）margin为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

多个定位元素重叠时

堆叠上下文
设置z-index

• 只有定位元素能设置z-index
• z-index可为负数，若为负数，遇常规流、浮动元素，则会被其覆盖

补充

• 绝对定位、固定定位元素一定是块盒
• 绝对定位、固定定位元素一定不是浮动（float变为none）
• 没有外边距合并