CSS的position属性完全解析

什么是position属性？

position是CSS中用来设置元素定位方式的属性，它有五种取值分别是：

• static
• relative
• absolute
• fixed
• sticky

static

static是position属性的默认值，元素不受top, right, bottom, left or z-index影响，即便设置了它们也不会生效。

relative

relative相对于元素自身正常位置进行定位。被定位的元素仍然根据文档流进行排列，其它元素仍然会占据原有的位置不受影响。当你设置top, right, bottom, left或z-index的时候，被定位的元素的位置会发生变化。

示例代码：

div.relative {
  position: relative;
  left: 30px;
  top: 50px;
}

absolute

absolute相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的body元素。被定位元素从文化流中脱离，不再占据原来的位置，所以其它元素位置会被改变。

示例代码：

div.parent {
  position: relative;
}

div.child {
  position: absolute;
  top: 30px;
  right: 50px;
}

fixed

fixed相当于一种特殊的绝对定位，而且是相对于浏览器窗口来计算位置。元素无论如何滚动，都会常驻在屏幕上的指定位置。和absolute一样，元素也从文化流中脱离，不影响其它元素。

示例代码：

div.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

sticky

sticky是一个新属性，还未广泛使用。它做的事情类似于fixed,sticky是相对于其它元素进行定位，但是具体的定位方式又和relative非常相似。在满足特定条件时，元素会固定在一个位置，但是随后又会继续按照正常的relative方式进行定位。

示例代码：

div.sticky {
  position: sticky;
  top: 0;
}

总结

以上是position属性的五种值的说明，它是CSS中用来定位元素位置的属性，切记在设置元素定位时不要滥用position属性，否则会将文档流打乱带来不良的排版效果。