CSS position fixed和absolute區別

antzone發表於2017-03-08
CSS

一提到css中定位馬上就會想到絕對定位和相對定位，其實絕對定位還可以繼續細分為兩種:

[CSS] 純文字檢視 複製程式碼
position:fixed;
position:absolute;

下面就簡單介紹一下兩者的相同點和區別:

（1）.兩者都脫離了文件流，可以使用left或者right等屬性進行定位。

（2）.absolute的絕對定位的元素會隨著滾動條滾動，fixed的絕對定位會固定於最初的位置。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>table細線表格-螞蟻部落</title> 
<style type="text/css">  
body{
  margin:0px;
  padding:0px;
  height:1000px;
}
#left{
  height:50px;
  width:50px;
  background:green;
  position:fixed;
  left:0px;
  top:100px;
}
#right{
  height:50px;
  width:50px;
  background:green;
  position:absolute;
  right:0px;
  top:100px;
}
</style>  
</head>  
<body>  
<div id="left"></div>
<div id="right"></div>
</body>  
</html>

上面的程式碼演示了兩者的區別，一目瞭然，這裡就不多介紹了。

二.定位參考物件的不同:

兩個定位方式的參考物件也是不同的，下面分別做一下介紹。

（1）.fixed定位方式：如果父級元素中沒有使用transform變換的，那麼它的參考物件就是視口，否則就是以採用transform變換的父輩元素。

（2）.absolute定位方式：如果父級元素具有采用定位的父級元素，那麼就以該父級元素為參考，否則就以以initial containing block為參考，具體可以參閱絕對定位一章節。

相關文章