详解CSS中三种position属性类型，打破你对网页布局的固有认知

CSS 中的 position 属性可用于设置网页元素的定位方式。通过改变position属性的取值，可以实现元素在页面上的不同定位效果。那么，position属性具体有哪些取值，分别表达什么含义呢？下面我们来一探究竟。

position 属性可设置为四个值，分别是 static、relative、absolute、fixed。

其中，static为默认值，表示元素按照文档流进行布局，不受top、bottom、left、right等属性的影响；

relative告诉浏览器相对于元素自身原来的位置进行偏移；

absolute告诉浏览器相对于其父元素的位置进行偏移，如果没有找到该元素的父元素，则相对于body元素进行偏移；

fixed则相对于窗口进行偏移，元素不会随着页面滚动而移动。

接下来，我们通过示例来看一下position属性的具体应用：

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.relative {
  position: relative;
  left: 50px;
  top: 50px;
}
.absolute {
  position: absolute;
  left: 50px;
  top: 50px;
}
.fixed {
  position: fixed;
  right: 0;
  bottom: 0;
}
</style>

<div class="box relative">relative定位</div>
<div class="box absolute">absolute定位</div>
<div class="box fixed">fixed定位</div>

在上述示例中，我们定义了一个.box的样式，用于作为演示用的元素，并为三个不同的元素分别应用了relative、absolute、fixed这三种取值。

你会发现，除了.static以外，其它三个元素都进行了偏移，并且随着页面滚动而变化。