定位

在上一篇文章中介绍了普通流中的 块级框和行内框。

在CSS中，除非专门指定，否则所有框都在普通流中定义。普通流中的元素定位是根据元素在HTML文档中的位置决定的。除了普通流，CSS中还有还有 浮动 和 绝对定位。

相对定位

通过对一个元素使用以下代码设置元素为相对定位：

div{
	position: relative; //设置元素相对定位
	left: 20px; //设置元素距离原来位置的距离。
	top: 20px;
}

将元素设置为相对定位后，它将出现在他所在的位置上。可以通过设置垂直或水平位置，让这个元素相对于原本所在的位置移动移动。如果将top值设置为20px,那么元素将出现在原位置顶部下面20px的地方。如果将left设置为20px，会将元素相对于原来的位置向右移动20px.如下图所示：

相对定位

相对定位时元素仍然会占据原来的空间，但不会让其脱离普通文档流。移动元素会让它覆盖其他元素。

绝对定位

其中 绝对定位 的元素是相对于距离他最近的那个已经定位的祖先元素确定的，如果没有已定位的祖先元素，那么它的位置是相对于初始包含块的。绝对定位通过给元素以下代码实现：

div {
position: absolute;  //设置元素绝对定位
left: 20px;  //设置元素在已定位的祖先元素中的位置
top: 20px;
}

设置了绝对定位的元素会 脱离文档流， 因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在一样。如下图所示：

绝对定位

和相对定位的元素一样，绝对定位的元素也可以通过设置 top、left、right和bottom的值调整绝对定位元素的位置。

因为绝对定位的元素与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置 z-index属性来控制这些元素的叠放次序。 z-index值越高，元素在栈中的位置就越高。

固定定位

固定定位是绝对定位的一种。差异在于固定定位的元素是相对于视口进行定位的。这让我们能够创建一直浮动在窗口中相同位置的元素。很多网站中的流氓侧栏广告就是这样的元素，它会随着页面一起滚动。