CSS的相对定位与绝对定位的区别

通常情况下，position属性默认是static，在正常的文档流中，静态定位的元素不受left,bottom,right,top属性的影响。

position属性位置值：static、relative、fixed、absolute、sticky。必须先给元素指定定位类型，才能使用left,bottom,right,top，否则无效。

在这5个位置值中，最难理解的是relative与absolute了。现在我们来看看他们之间的布局方式。

对于relative：

我们看看正常流文档的布局方式：

然后我们对position设置relative,left:50px

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

同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。

结论：position:relative,它的位置是相对于它正常的位置。设置相对放置的元素的top，right，bottom和left属性将导致其偏离正常位置进行调整，其他内容将不进行调整以适合元素留下的任何间隙。

再来看看absolute：

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

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

结论：元素position: absolute;的位置相对于最近的祖先位置（而不是相对于视口的位置，如固定位置）。

然而; 如果绝对定位的元素没有祖先，它将使用文档正文，并随页面滚动一起移动。

注意： “定位”元素是位置除以外的任何元素 static。

文字太多，看下面图：

结论：元素position: absolute;的位置相对于最近的祖先位置，且祖先的元素一定要设置position不为static的值才能作为参照物，进行left,top,right,bottom调整。