1.相對(duì)定位
相對(duì)定位實(shí)際上被看做普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于他在普通流中的位置。在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框。

  .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

由此可見(jiàn)，元素定位為relative，是相對(duì)于他在普通流中的位置偏移。相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間，因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框。
但是如果在樣式中加float屬性的話，在定位relative，則定位時(shí)相對(duì)于其脫離了文檔流即浮動(dòng)的位置來(lái)進(jìn)行定位的。

2.絕對(duì)定位
絕對(duì)定位是元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間（我認(rèn)為不占據(jù)空間的含義是絕對(duì)定位偏移空出來(lái)的空間，其他元素塊會(huì)占用），普通文檔流中其他元素的布局就像絕對(duì)定位的元素不存在時(shí)一樣。

.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

可見(jiàn)absolute不占據(jù)空間，本來(lái)box3在box2旁邊，現(xiàn)在box2采用absolute則會(huì)脫離文檔流，現(xiàn)在box3會(huì)挨著box1來(lái)排列。所以說(shuō)是不占據(jù)空間的。

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

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的直接父容器應(yīng)該為container,但是這里container并沒(méi)有設(shè)置相對(duì)定位，所以如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊，這里就是body，設(shè)置body的顏色為黃色，可以看出right是相對(duì)于body來(lái)定位的，但是取消container的注釋符之后，則圖6所示

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。