CSS:position属性的区别

CSS中position属性的区别

static

即没有定位，遵循正常的文档流对象，会忽略top,left,bottom,right的作用；

---

fixed

相对于浏览器可视区固定位置；
脱离文档流，不占据空间

---

relative

相对于其正常位置定位；
原本占据的空间不会移动；
常用来作为绝对定位元素的容器；

---

absolute

相对于最近的已定位的父级元素，如果没有，则相对于html元素；
脱离文档流，不占据空间

---

sticky

基于用户的滚动位置来定位，在position和fixed之间来回切换；
当页面滚出目标区域时，它会像fixed一样固定在目标位置；
不滚动时，其行为与相对定位相同；
滚动后，top，left，bottom，right生效，但margin会失效；