HTML之position:absolute relative static fixed的區別和理解

pan_jinquan發表於2016-02-24
HTML

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如下： 

<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;
}
下面是效果：

  可以看到一個有趣的現象，那就是雖然我們把div2移走了，但是div1和div3中間還是有一個空間，說明相對定位的元素是會佔據文件流空間的，這裡的div2就是典型的“站著茅坑不拉屎”。

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

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元素的屁股後面，而不再會單獨佔用一行，如下圖：

這裡把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程式碼： 
<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的上外邊框邊界剛好在其上浮動元素的下外邊距邊界之下

效果圖；


相關文章