css之5种定位position

1.position:static 静态定位

**
HTML默认值，就是没有定位，属于正常的文档流
top，left，right，bottom等偏移量没影响

**

2.position:relative 相对定位

基于正常的文档流进行的定位（相对其正常位置。），占位置
可设置top，left，right，bottom等偏移量
**

添加偏移量后（针对自己布局来设置）

**

3.position:absolute 绝对定位

完全脱标（脱离标准文档流），完全不占位置
可设置top，left，right，bottom等偏移量
相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于html来进行定位:

**
此时橙色盒子和黄色盒子都设置了absolute，橙色盒子被压住（因为在代码中橙色div在黄色div的下面）了

**
由于父元素没有设置定位，所以两个盒子是相对于html进行定位的，设置偏移量后脱离了父盒子

**

4.position:fixed 固定定位

完全脱标（脱离标准文档流），完全不占位置
可设置top，left，right，bottom等偏移量
元素的位置相对于浏览器窗口定位，始终依据浏览器窗口来定义自己的显示位置，不随着滚动条滚动

**此时滚动条的位置最上

**
此时滚动条在最下，可是两个子盒子还是在浏览器窗口最顶部位置
**

5.position:sticky 粘性定位

sticky 字面意思是粘，粘贴，所以可以把它称为粘性定位
基于用户的滚动位置来定位，和fixed与relative都有点相似性，在relative 与 fixed 定位之间切换，但是sticky，必须在设置了top，left，right，bottom四个偏移量的其中之一或多个之后才可使粘性定位生效，否则其行为与相对定位相同

**
没设置偏移量

**

**

设置偏移量
**

**

**