通常情况下，我们的position属性的值默认为stastic就是没有定位，元素出现在正常的文档流中，这个时候你给这个元素设置的left,right,boottom,top,这些偏移属性都是没有效果。比如你设置一个距离左边偏移100px的声明：left:100px那么这条声明不会起到任何效果。也就是说我们平时如果补个某个position属性的声明，那么它？默认就是我们我上述的这种情况，不过因为有了浮动，所以通常情况下我们还真不需要给这些元素设置Position属性！

但是某些特殊的情况下，我们不得不用到position属性，position属性的relative和absolute的值。

1.相对定位：Position：relative

这个元素成为了“相对定位”的盒子。相对定位之后呢，就可以用top,left,right,bottom这些词语微微调整这个盒子，调整相对自己原来的位置而言，所以取名相对定位。

怎么理解呢？如果说我对某个元素设置了相对定位，那么首先这个元素它会跟其他的元素一样，出现在文档流中它该出现的位置，然后我们设置它的水平或垂直偏移量，让这个元素相对它在文档流中的位置的起点进行移动。有一点要注意，在使用相对定位时，就算元素被偏移了，但是它仍然占据它没有偏移前的位置的空间。

我们先看看下面的图：

上面有三个浮动的块，第二个设置了相对定位position:relative；了的，这时大家看到它的位置并没有跟其他有什么不同，跟其他两个块一样都处在正常的文档流中。接下来我们给它设置块的一个偏移：left:50px;top:30px这时我们再看看效果：

这时我们发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的位置空间依然还在，即使我们把偏移量设置的再大一点，它完全离开原来的位置，它原来的位置依然在，不会被第三个块浮动过来填补掉。（即使我们不设置偏移量，只是设置一个定位，它也会脱离文档流，飘起了的。）

同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠在其他文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。我们可以设置它的z-index属性来调整它的堆叠顺序。

相对定位的实战用途就两字：微调

案例一:微调按钮的位置。

position:relative;

top:-10px;

2.绝对定位：position:absolute

绝对定位：以网页的左上角为坐标轴原点，进行定位。

绝对定位的元素脱标，立即释放自己在标准流中的位置（跟浮动差不多，一旦设置，立马脱标）

被设置了绝对定位的元素，在文档流中式不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，那么这个元素到哪里去了呢？它浮起来了，其实设置了相对定位relative时也会让该元素浮起来，但是他们的不同点在于：相对定位不会删除它本身在文档流中占据的那块空间，而绝对定位会删除该元素在文档流中的位置，完全从文档流中抽出来，我们可以通过z-index来设置顺序。它们的堆叠。

那么绝对定位如何定位的呢？首先它的父元素设置了比如position:relative或者position:absolute以及position:fixed（除了static)那么它就会相对于它的父亲元素来定位（子绝父相），位置通过left,top,right,bottom,属性来规定，如果它的父元素没有设置定位。那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了比如position:relative或者position:absolute以及position:fixed的第一个元素祖先元素，如果所有的祖先元素都没有设置以上三种定位中的其中一种定位，那么它就会相对body来定位（并非相对于窗口定位，相对于窗口定位的是fixed)

绝对定位的元素相对于谁来定位，我们就把这个“谁”叫着参照物，我们看下面的图就明白了

我们看一下浏览器里的效果图，我们先看看没有使用绝对定位时的样子：

然后我们给第二个块设置绝对定位：position:absolute然后设置一个偏移：left:150px;top:40px;这时就变成了如下图：

还有一点就是：在设置偏移量的时候，我们可以设置负值。