天天看點

HTML之position:absolute relative static fixed的差別和了解

HTML之position:absolute relative static fixed的差別

在了解position:absolute relative static fixed的差別時,我們先需要清楚什麼是文檔流。

一、文檔流:将窗體自上而下分成一行一行,并在每行中按從左至右的挨次排放元素,即為文檔流。

每個非浮動塊級元素都獨有一行, 浮動元素則按規則浮在行的一端. 若當時行容不下, 則另起新行再浮動。内聯元素也不會獨有一行. 一切元素(包括塊級,内聯和清單元素)均可生成子行, 用于擺放子元素。有三種狀況将使得元素離開文檔流而存在,分别是浮動、絕對定位、固定定位.

然則在IE中浮動元素也存在于文檔流中,浮動元素不占任何正常文檔流空間,而浮動元素的定位照樣基于正常的文檔流,然後從文檔流中抽出并盡能夠遠的挪動至左側或許右側。當一個元素脫離正常文檔流後,依然在文檔流中的其他元素将忽略該元素并填補其原先的空間。 

  基于文檔流,了解以下的定位形式:

相對定位:元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留。

絕對定位:即完全離開文檔流, 相關于position屬性非static值的比來父級元素進行偏移。

固定定位:即完全離開文檔流,相關于視區進行偏移。

文檔流是文檔中可顯示對象在排列時所占用的位置。比如網頁的div标簽它預設占用的寬度位置是一整行,p标簽預設占用寬度也是一整行,因為div标簽和p标簽是塊狀對象。

網頁中大部分對象預設是占用文檔流,也有一些對象是不占文檔流的,比如表單中隐藏域。當然我們也可以讓占用文檔流的元素轉換成不占文檔流,這就要用到CSS中屬性position來控制。

二、CSS 2.0對position的定義:檢索對象的定位方式。共有4種取值。

absolute:絕對定位。将對象從文檔流中拖出,使用left,right,top,bottom等屬性相對于其最接近的一個最有定位設定的父對象進行絕對定位。如果不存在這樣的父對象,則依據body對象。而其層疊通過z-index屬性定義

。當對象定位在浏覽器視窗以外,浏覽器是以顯示滾動條。

fixed:固定定位。對象定位遵從絕對(absolute)方式。但是要遵守一些規範。當對象定位在浏覽器視窗以外,浏覽器不會是以顯示滾動條,而當滾動條滾動時,對象始終固定在原來位置。

relative:相對定位。對象不可層疊,但将依據left,right,top,bottom等屬性在正常文檔流中偏移位置。當對象定位在浏覽器視窗以外,浏覽器是以顯示滾動條。 

static:元素框正常生成。塊級元素生成一個矩形框,作為文檔流的一部分,行内元素則會建立一個或多個行框,置于其父元素中。

inherit:繼承值,對象将繼承其父對象相應的值。

所有的塊元素在html文檔中是按照它們出現在文檔中的先後順序排列的(當然,嵌套不在此列),每一個塊都會另起一行。如下圖

HTML之position:absolute relative static fixed的差別和了解

他們對應的html如下: 

<html>
  <head>
    <title>DIV+CSS</title>
    <style>
#div1 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
}
#div2 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
}
#div3 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
} 
    </style>  
  </head>
  <body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
  </body>  
</html>      

三、CSS中的相對定位和絕對定位模型

   在文檔流中,每個塊元素都會被安排到流中的一個位置,我們可以通過CSS中的定位屬性來重新安排它的位置。定位分為相對定位和絕對定位, 相對定位是相對于該塊元素在文檔流中的位置的,比如,我們可以使用相對定位把div2放到div1的右側,CSS代碼如下: 

#div1 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
}

#div2 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
  position: relative;
  top: -64px;
  left: 204px;
}

#div3 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
}      

下面是效果:

HTML之position:absolute relative static fixed的差別和了解

可以看到一個有趣的現象,那就是雖然我們把div2移走了,但是div1和div3中間還是有一個空間,

說明相對定位的元素是會占據文檔流空間的,這裡的div2就是典型的“站着茅坑不拉屎”。

使用絕對定位也是可以把div2擺到div1的右邊的,而且絕對定位是不會占據文檔流空間的,如下圖,div1和div3之間沒有空白:

HTML之position:absolute relative static fixed的差別和了解

div2的CSS代碼: 

#div2 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
  position: absolute;
  top: 15px;
  left: 214px;
}      

絕對定位是個好東西,可以把内容顯示到頁面上的任何位置,但是對于我們程式員來說,卻不能使用太多的絕對定位,因為使用程式動态向div中添加内容,div的大小是不可知的,無法将每一個div的位置都定死。

四、CSS中的浮動和清除模型

   在CSS中,最讓人不好了解的應該算是float和clear意義了。float可以達到這樣一個效果,就是本來應該一行一個的塊元素,如果定義了float屬性,則隻要行的空間足夠,它會跑别的float元素的屁股後面,而不再會單獨占用一行,如下圖:

HTML之position:absolute relative static fixed的差別和了解

這裡把div2和div3都定義了為浮動,代碼如下:

#div2 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
  float:left;
}

#div3 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
  float:left;
}      

   那什麼情況下需要clear呢?這是因為float的元素和絕對定位的元素一樣,也是不占用文檔空間的,是以,如果我們把div2和div3都嵌套在div1中,并且把div2和div3都定義為浮動,那麼由于它們不占用文檔空間,設定為浮動後div2和div3都不屬于div1的内容了,是以作為父元素的div1沒有内容填充,不知道自動擴充大小,以至于顯示出來div2和div3會跑到div1的外面,如下圖

HTML之position:absolute relative static fixed的差別和了解

下面是它們的html代碼: 

<div id="div1">div1
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>      

下面是它們的css代碼: 

#div1 {
  border: 1px solid #000099;
  height: 60px;
  width: 450px;
  margin:2px;
}

#div2 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
  float:left;
}

#div3 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin:2px;
  float:left;
}      

因為float的元素不占用文檔流空間,有時候元素還會重疊到float元素上,這裡我就不舉例了。

為了解決上面的問題,就需要在float之後的元素上面使用clear,在此例中,我們在div3後面加入一個空段落,并設定其為clear,如下: 

<div id="div1">div1
<div id="div2">div2</div>
<div id="div3">div3</div>
<p class="clear"></p>
</div>      

clear 屬性定義了元素的哪邊上不允許出現浮動元素。下面是新增加的空段落的CSS代碼:

.clear{
  clear:left;
}      

這時div1有了p這塊内容(盡管p裡面是空的),并且clear:為left, 使得p的上外邊框邊界剛好在其上浮動元素的下外邊距邊界之下

效果圖;