🍓定位
- ⭐
static
(默认值):
无定位 - ⭐相对定位(
relative
):- 📌文档流:不脱离文档标准流(即便位移到别的地方,自己原来的位置还是存在的)
- 📌参照物:自己的初始位置
- ⭐绝对定位(
absolute
):- 📌文档流:脱离文档标准流(
margin
无效) - 📌参照物:
- 🍁当没有父元素、或者父元素没有定位,参照浏览器窗口第一屏(受到屏幕滚动的影响)
- 🍁当有父元素并且父元素有定位,参照父元素(子绝父相)
- 📌特点:
可以自动将一个行内元素转为块元素
- 📌文档流:脱离文档标准流(
- ⭐固定定位(
fixed
):- 📌文档流:脱离文档标准流
- 📌参照物:浏览器当前窗口
- ⭐粘性定位(
sticky
):- 📌文档流:不脱离文档标准流
- 📌可以做吸顶效果,粘性定位是
CSS3
新增的,兼容性不好 - 📌粘性定位必须要设置
top
值,不然无效
🍓定位属性
属性名称 | 中文注释 | 备注 |
---|---|---|
position | 设置定位属性 | ⭐static :无定位 ⭐ relative :相对定位⭐ absolute :绝对定位⭐ fixed :固定定位⭐ sticky :粘性定位 |
left | 左偏移量 | |
top | 上偏移量 | |
right | 右偏移量 | |
bottom | 下偏移量 | |
z-index | 层叠顺序(只在有定位的情况下才会生效) | ⭐属性值不带单位 ⭐可以给负值 ⭐数值越大,层越靠屏外 ⭐兄弟盒子,未设置z-index则默认最后写的对象优先显示在最上层 ⭐父子盒子,如果需要父盒子显示在子盒子的上方,则设置子盒子的值为负数就行,设置父盒子不管用 |
🍓浮动和定位的区别
- ⭐浮动属于半脱离文档流,它的层级与文字的层级一致
- ⭐定位属于完全脱离文档流,它的层级高于文字的层级