position布局
# 定位
# 概述
- 可以解决盒子之间的层叠问题
- 可以将盒子摆放在屏幕中的任意位置
提示
层叠任意位置用定位，
# 使用
- 使用定位方
- 使用偏移量
# 使用定位
position: relative;
# 使用偏移量
left: 100px;
bottom: 0;
1
2
3
4
5
2
3
4
5
# static
默认为标准流
# relative
没有脱标相对于原位置定位 应用场景：子绝父相，小范围移动
# absolute
脱标相对于有定位的最接近的祖先元素定位（排除静态定位），如果没有定位相对于浏览器的可视区域
注意
在使用子绝父相的时候，如果父元素已经加了绝对定位，子元素直接子绝就可以
因为父元素有定位，盲目修改定位方式，会影响之前的布局
# Demo演示
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
# fixed
脱标，相对于浏览器可视区域定位
# sticky
不脱标，相对于浏览器可视区域，必须设置偏移量中的一个，兼容性差IE不支持
# 总结
| 定位方式 | 属性值 | 相对谁移动 | 是否占位置 |
|---|---|---|---|
| 静态 | static | 跟标准流一样 | 占 |
| 相对 | relative | 原来位置 | 占（不脱标） |
| 绝对 | absolute | 有定位的最接近的祖先元素（默认浏览器可视区域） | 不脱标） |
| 固定 | fixed | 浏览器的可视区域 | 不占（脱标） |
| 粘性 | sticky | 浏览器的可视区域 | 占（不脱标） |
上次更新: 2023/01/29, 11:01:00