1.相對定位
相對定位實際上被看做普通流定位模型的一部分，因為元素的位置相對于他在普通流中的位置。在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其他框。

  .left                                                     
{
    width:200px;
    height:200px;
    background:green;
}
.right
{
    width:200px;
    height:200px;
    background:red;
}
  <div class="left"></div>
  <div class="right"></div>

顯示如圖1 IE8

將.left改為：

.left
{
    width:200px;
    height:200px;
    background:green;
    position:relative;
    top:20px;
    left:20px;
}   

如圖2

由此可見，元素定位為relative，是相對于他在普通流中的位置偏移。相對定位時，無論是否進行移動，元素仍然占據原來的空間，因此，移動元素會導致它覆蓋其他框。
但是如果在樣式中加float屬性的話，在定位relative，則定位時相對于其脫離了文檔流即浮動的位置來進行定位的。

2.絕對定位
絕對定位是元素的位置與文檔流無關，因此不占據空間（我認為不占據空間的含義是絕對定位偏移空出來的空間，其他元素塊會占用），普通文檔流中其他元素的布局就像絕對定位的元素不存在時一樣。

.box1
{
    float:left;
    width:200px;
    height:200px;
    background:green;
}
.box2
{
    float:left;
    width:200px;
    height:200px;
    background:red;
}
.box3
{
    float:left;
    width:200px;
    height:200px;
    background:gray;
}

如圖3

然后在.box2增加{position:absolute;top:50px;left:50px;} 如圖4

可見absolute不占據空間，本來box3在box2旁邊，現在box2采用absolute則會脫離文檔流，現在box3會挨著box1來排列。所以說是不占據空間的。

絕對定位的元素的位置相對于最近的已定位祖先元素。如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。而這里box2就是相對于body定位的。
對于定位的主要問題是要記住每種定位的意義，相對定位是“相對于”元素在文檔流中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是最初的包含塊。因為絕對定位的框與文檔流無關，所以他們可以覆蓋頁面上的其他元素，可以通過設置z-index屬性來控制這些框的堆放次序，z-index值越高，框在堆中的位置就越高，也就是值越大離屏幕越近。‘
現在讓兩個塊分別居于一個快的左上角和右下角。但是我們首先寫一段樣式：

body 
{
    margin:0px;
    padding:0px;
    background:yellow;
}

#container
{
    margin-left:auto;  /*為了居中*/
    margin-right:auto;  /*為了居中*/
    /*position:relative;*/
    width:960px;
    height:800px;
    background:green;
}

#left
{
    float:left;
    width:200px;
    height:200px;
    background:red;
}

#right
{
    position:absolute;
    right:0px;
    bottom:0px;
    width:200px;
    height:200px;
    background:red;
}
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

則效果如圖五所示

這里right的直接父容器應該為container,但是這里container并沒有設置相對定位，所以如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊，這里就是body，設置body的顏色為黃色，可以看出right是相對于body來定位的，但是取消container的注釋符之后，則圖6所示

在進行頁面布局時，絕對定位是非常有用的工具，尤其是在使用相對定位的祖先元素的情況下，完全可能只使用絕對定位創建出整個設計。但是注意-------在Windows上的IE5.5和IE6中有一個bug，如果試圖相對于相對定位的框的右邊或底部設置絕對定位的框的位置，那么需要確保相對定位的框已經設置了尺寸，如果IE會相對于畫布定位這個框。

總結

以上是生活随笔為你收集整理的CSS相对定位和绝对定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。