CSS Position 是网页排版中不可或缺的一部分，它可以让开发者更好地控制页面中的元素，使得网页变得更加美观与实用，尤其是在实现一些特殊布局时，它更是重中之重。本文将从零开始，逐个讲解CSS Position 的各个属性，让读者可以透彻地理解它的作用和用法。

1. Static

Static是CSS Position 中最基本的一种属性，也是默认的属性值。它没有任何特殊效果，元素被渲染在正常的文档流中。此时，其他属性比如top、bottom、left、right等就无效了。大多数的网页元素在没有指定position属性时，就是使用Static默认值。

2. Relative

Relative是一种相对定位，与Static不同，设置了Relative属性后，元素会相对于文档流中的位置进行偏移。可以使用top、bottom、left、right属性控制元素的偏移量。这个偏移量的参照点仍然是元素原本应该在的位置。如果元素没有设置Relative属性，则设置上述四个属性也不会起到作用。

示例代码：

```

div {

position: relative;

top: 20px;

left: 50px;

}

```

3. Absolute

Absolute是一种绝对定位，它会将元素完全从文档流中脱离出来，相对于它的父元素进行定位。此时，它的位置是相对于父元素的，而不是文档流中的位置了。如果它的父元素没有设置位置属性，那么Absolute元素将会相对于整个文档进行定位。

示例代码：

```

div {

position: absolute;

top: 20px;

left: 50px;

}

.parent {

position: relative;

}