1. 介绍
很多网页中会用到position属性来控制元素的位置，使用position属性可以使得某些元素基于文档流之外布局，从而实现更高级的布局效果。position属性有四个值：static、relative、absolute、fixed，下面我们逐一介绍这四个值的作用。
2. static
static是position属性的默认值，我们不用对元素进行设置position为static，元素会按照文档流正常排列。它的特点是元素的位置不会受到其它的定位属性（top、right、bottom、left）的影响，所以即使我们给元素添加了top、right、bottom、left这四个属性，其位置也不会发生改变。
3. relative
relative表示相对定位，当元素的position设置为relative时，元素会以原本的位置为基础进行定位，并且可以通过top、right、bottom、left这四个属性对元素进行微调。
position: relative;
通过设置top、right、bottom、left这四个属性，我们可以对元素进行微调，这些属性都接受正数、负数和0作为值，当一个元素被设置为relative时，这四个属性是相对于元素本身的位置进行定位的。例如：
.relative-div {
position: relative;
left: -10px;
top: 20px;
}
上述代码表示让.relative-div元素向左移动了10像素，向下移动了20像素。
4. absolute
absolute表示绝对定位，将一个元素的position属性设置为absolute，这时它将脱离文档流，从而能够更灵活地定位。当我们给一个元素设置了absolute之后，该元素会相对于其最近的已定位（position属性值为除static以外的值）的祖先元素进行定位，如果它没有已定位的祖先元素，那么它将会相对于文档的
元素进行定位。
position: absolute;
和relative类似，我们可以通过设置top、right、bottom、left来对元素进行详细的定位。同时，如果想让元素放置在文档流中其他元素的上方，只需将该元素的z-index属性设置成较大的值。
5. fixed
fixed也表示绝对定位，但与absolute不同的是，它的定位是相对于可视窗口而非文档的，而且即使在网页滚动的时候，元素依然会固定在相同的位置不会发生改变。
position: fixed;
除了相对于可视窗口定位之外，其他设置方法和absolute一样。
6. 总结
通过掌握position属性，我们可以更加灵活地排版和设计网页。不过需要注意的是，过度使用position属性进行排版可能会导致网页加载缓慢，同时在不同的浏览器中，position属性有时会出现不同的表现，因此在实际开发中需要注意兼容性。