这是对position讲解最通俗易懂的版本了。

position

为了制作更多复杂的布局，我们需要讨论下 

position

 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。

static

.static {
position: static;
}

<div class="static">

static

 是默认值。任意 

position: static;

 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。</div>

relative

.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}

<div class="relative1">

relative

 表现的和 

static

 一样，除非你添加了一些额外的属性。</div><div class="relative2">在一个相对定位（position属性的值为relative）的元素上设置 

top

、 

right

 、 

bottom

 和 

left

 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。</div>

fixed

<div class="fixed">Hello！暂时不要太关注我哦。</div>一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 

relative

 一样， 

top

 、 

right

 、 

bottom

 和

left

 属性都可用。我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：

.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}

一个固定定位元素不会保留它原本在页面应有的空隙。令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

absolute

absolute

 是最棘手的position值。 

absolute

 与 

fixed

 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指p osition 值不是 

static

 的元素。这里有一个简单的例子：

.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}

<div class="relative">这个元素是相对定位的。如果它是 

position: static;

 ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。<div class="absolute">这个元素是绝对定位的。它相对于它的父元素定位。</div></div>这部分比较难理解，但它是创造优秀布局所必需的知识。下一页我们会使用 

position

做更具体的例子。