开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情
文章概览
- 绝对定位
- 固定定位
- 粘滞定位
绝对定位
开启绝对定位需要将元素的position属性的值设置为absolute。开启绝对定位后水平方向的布局需要left和right两个属性来进行设置，如果有auto则自动调整布局。因为left和right默认值是auto，因此如果不进行赋值的话会自动调整这两个值。
特点
- 如果元素开启了绝对定位，未设置偏移量的元素位置不会发生变化。
- 如果元素开启了绝对定位，元素会从文档流中脱离。
- 开启绝对定位的元素性质会发生改变，即行内成块，块的高度被内容撑开。
- 开启绝对定位的元素会提升一个层级。
- 开启绝对定位的元素是相对于其包含块进行定位的。
包含块
一般来说，包含块即当前元素最近的祖先块元素，而绝对定位的包含块是距离元素最近的并开启了定位的祖先元素，如果全部的祖先元素都未开启定位那么根元素即为该元素的包含块。
固定定位
开启固定定位需要将元素的position属性设置为fixed，因为固定定位实际上属于一种绝对定位，所以固定定位也具有绝对定位的特点，不同的是，固定定位永远参照于浏览器的视口进行定位，如果元素开启固定定位，就不会随网页的滚动条滚动。
粘滞定位
- 当元素的position属性设置为sticky时则开启了元素的粘滞定位。
- 粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。
