详解CSS Position 5种不同的值的用法

在CSS中，position属性用于指定一个元素在文档中的定位方式。这个属性可以取5个值，包括：

• static
• relative
• absolute
• fixed
• sticky

接下来，我们将逐个介绍这5种值的用法。

1. static

static是position属性的默认值，表示元素在文档中的位置使用正常的布局流程规则来确定。也就是说，如果没有特别指定其他的position值，元素都会被视为static。

.box {
  position: static;
}

2. relative

relative表示元素相对于它本身原来的位置进行定位。也就是说，元素原本在文档中的位置并不会改变，只是微调了它的位置，相当于在它的原有位置上加上了top、right、bottom、left这4个属性，如果没有指定这些属性，则元素仍然保持在原来的位置。

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

3. absolute

absolute使元素的位置相对于最近的一个非static父元素进行定位。如果不存在这样的父元素，那么该元素的位置将相对于文档的起始位置进行定位。与relative不同的是，absolute使元素脱离了文档的普通流程，不再占据空间。

<div class="box1">
  <div class="box2"></div>
</div>

.box1 {
  position: relative;
}
.box2 {
  position: absolute;
  top: 20px;
  left: 30px;
}

在上面的代码中，使.box2元素相对于它的父元素.box1进行定位，而.box1是一个relative属性，意味着.box2的位置是相对于.box1而言的。

4. fixed

fixed表示元素相对于浏览器窗口进行定位，这个元素不会因为滚动而移动。

.box {
  position: fixed;
  top: 20px;
  left: 30px;
}

在上面的代码中，.box元素始终会出现在窗口的左上角。

5. sticky

sticky表示元素在滚动过程中是relative和fixed的混合形式。当它离开视口顶部时，它将保留在其原始位置，就像fixed定位一样；当它在容器内时，就像relative定位一样。

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

在上面的代码中，如果.box元素滚动到页面的顶部，它会保持在该位置，并变为fixed定位。否则，它将被视为relative定位。