定位

一种布局方式

定位 = 定位模式 + 边偏移

边偏移

边偏移属性	示例	描述
top	top: 80px / 50%	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式

值	语义
static	静态定位	标准流 无定位
relative	相对定位	标准流 相对自身定位 标准流区域的位置仍占有
absolute	绝对定位	脱离标准流 相对最近的有定位且不为 static 的祖先元素定位，若没有则相对 body 定位
fixed	固定定位	脱离标准流 相对于浏览器窗口定位
sticky	粘性定位	根据窗口滚动自动切换 relative 和 fixed，由设置的边偏移决定

z-index

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。

使用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

z-index 的特性如下：

1. 属性值：整数，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

BFC

设定 position ＝ absolute 或 fixed 可以创建 BFC 解决高度塌陷, 外边距重叠，清除浮动问题