position absolute與fixed 區別

admin發表於2017-12-04

本章節通過程式碼例項介紹一下兩種定位方式的區別。

position:absolute是絕對定位，其實position:fixed也是絕對定位的一種擴充套件或者說變型。

兩者都脫離了文件流，但是又有很大的不同點。

position:fixed定位的元素會固定原來的位置不變，無論如何拖動滾動條。

程式碼例項:

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

程式碼演示了兩種定位的不同特徵，同時它們定位參考物件的不同:

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

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

相關文章