【CSS】元素的定位

定位

position
通过定位可以将元素摆放到页面的任何位置
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位

1. 相对定位

特点

1.元素开启相对定位之后，如果不设置偏移量元素不会有任何变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提高元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素

偏移量（offset）

当元素开启定位之后可以通过偏移量来设置元素的位置
top、bottom
定位元素垂直方向的位置，通常情况下只用设置一个值
left、right
定位元素水平方向的位置，通常情况下只用设置一个值

2. 决对定位

特点

1.开启决对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启决对定位后元素脱离文档流
3.开启决对定位后会改变元素的性质
4.绝对定位会提高元素的层级
5.绝对定位元素是相对于其包含块进行定位的

包含块

正常情况下：
包含块是 离当前元素最近的 祖先块元素
开启绝对定位情况下：
包含块是 离他最近的开启了定位的 祖先元素
如果所有的元素都没有开启定位&#x