css定位属性position的用法

写这篇文章的主要目的是为了解决：大部分web开发人员进行元素定位时，偶尔会出现元素的位置不符合预期的情况。比如，我们对一个元素定义了如下css样式：

position:absolute;top:20px;left:20px;

我们预期这个元素是相对于页面左上角向下偏移20px，向左偏移20px。当然大部分情况会让我们如愿以偿，但有时候并不能得到我们想要的结果。具体什么原因呢，且听我慢慢道来。

首先我们要知道，position属性有四个值：static、absolute、relative、fixed，其中static是position的默认值。这四个值的含义如下：

static：元素生成自己的元素框，并置于文档流中；

relative：元素生成自己的元素框，并置于文档流中，当设置偏移属性时，元素会相对原来的位置进行偏移；

absolute：元素生成一个块级框，不将其置于文档流中，当设置偏移属性时，元素会相对其包含块进行偏移；

fixed：元素生成一个块级框，不将其置于文档流中，当设置偏移属性时，元素会相对浏览器窗口进行偏移；

其中static没啥好说的。relative可以理解它是在static上做了一点改动，元素生成自己的元素框后，本来是不能移动的，但当我们设置了position为relative后，它就可以相对自己原来的位置进行偏移，但是元素在文档流上原来占据的空间不会发生改变。

设置为absolute的时，元素就不会在文档流中占用空间，可以理解为元素脱离文档流而存在，当给他设置偏移属性后，元素就会相对它的包含块进行偏移。这里的包含块的定义如下：该元素最近且position不为static的祖先元素的边框界定的区域，如果没有这样的祖先元素，则包含块为浏览器窗口大小的矩形。到这里就可理解第一段里面提到的问题了。当我们为一个元素设置了“position:absolute;top:20px;left:20px;”的样式，它是相对于它的包含块进行偏移。

设置为fixed的时，与设置成absolute有点相似，但是元素的包含块视窗本身。