定位
position
- 用来设置元素的定位方式
- 可选值：
- static 默认值，元素没有开启定位
- relative 开启元素的相对定位
- absolute 开启元素的绝对定位
- fixed 开启元素的固定定位
- sticky 开启粘滞定位
相对定位
- 将元素的position属性设置为relative则开启了元素的相对定位
- 相对定位的特点：
- 开启相对定位而不设置元素的偏移量，此时元素不会发生任何变化
- 开启相对定位不会使得元素脱离文档流，不会改变元素的性质
- 相对定位元素是参照与其原来的位置进行定位的
- 相对定位会提升元素的层级
- 偏移量
- 开启了相对定位的元素可以通过偏移量来设置元素的位置
- 偏移量一共有四个：
- top 元素上面距离定位位置上边的距离
- bottom 元素下边距离定位位置下边的距离
- left 元素左边距离定位位置左边的距离
- right 元素右边距离定位位置右边的距离
- 偏移量通常只使用两个即可定位一个元素的位置
绝对定位
- 将元素的position设置为absolute，则开启了元素的绝对定位
- 特点：
- 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
- 开启绝对定位后，元素会脱离文档流，同时元素性质发生变化
- 绝对定位元素是参照与离它最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位。所以在开发中，经常在为一个元素开启绝对定位后，同时也给他的父元素开启绝对定位
- 绝对定位会提升元素的层级
- 绝对定位元素的包含块是谁？
- 绝对定位元素的包含块是离他最近的开启了定位的祖先元素
- 如果所有的祖先都没有开启定位，则它的包含块是初始包含块
- 盒子模型的等式
- margin-left + 可见框宽度 + margin-right = 包含块的内容区宽度
- 当元素开启了绝对定位后，两个新的等式诞生了
- left + margin-left + 可见框宽度 + margin-right + right = 包含块的内容区宽度
- top + margin-top + 可见框高度 + margin-bottom + bottom = 包含块的内容区高度
固定定位
- 将position设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，它的大部分的特点和绝对定位是相同的
- 不同点在于固定定位总是参照于浏览器的窗口进行定位
粘滞定位
- 将元素的position设置sticky则开启了元素的粘滞定位
- 定位参照物：粘滞定位相对于离它最近的拥有滚动条的祖先元素来定位的