CSS position: absolute 絕對定位

admin發表於2018-08-03
CSS

一.絕對定位基本概念:

作者作為一個多年從業人員，前端知識的點點滴滴都是從零學起的。

由此也深知在初學階段所面臨的問題，絕對定位和相對定位曾是攔路虎之一，至今記憶深刻。

本文將通過程式碼例項詳細介紹一下position:absolute絕對定位，相對定位可以參閱CSS 相對定位一章節。

絕對定位主要會對元素產生如下幾個方面的影響：

（1）.元素可以產生位移。

（2）.元素會脫離文件流。

（3）.將內聯元素轉換為塊級元素。

關於文件流更多內容可以參閱什麼是文件流一章節。

語法結構：

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

上面程式碼可以將指定元素設定為絕對定位，通常和top、right、bottom和left具體定位屬性配合使用。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
div{
   position:absolute;
   left:10px;
   top:20px;
 }

具體定位屬性解析：

（1）.top：規定絕對定位元素距離定位參考元素頂部的距離。

（2）.bottom：規定絕對定位元素距離定位參考元素底部的距離。

（3）.left：規定絕對定位元素距離定位參考元素左部的距離。

（4）.bottom：規定絕對定位元素距離定位參考元素底部的距離。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/22/143504ojsa5qms9293el42.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特別說明:定位元素經常與z-index屬性一起使用，具體可以參閱CSS z-index一章節。

程式碼例項如下:

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

可能會有朋友問，同時設定top/bottom或者left/right這種方位衝突的屬性值會出現什麼情況。

位移值可以是負數，程式碼例項如下：

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

如果設定為負數，那麼元素就會向相反的方位位移。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant{ 
  width:100px; 
  height:100px; 
  background-color:#0094ff; 
  position:absolute;
  left:50px;
  right:1500px;
  top:30px;
  bottom:2000px;
}  
</style> 
</head> 
<body> 
<div class="ant"></div> 
</body> 
</html>

由瀏覽器渲染效果可以看出left和top的優先順序要高於right和bottom。

二.絕對定位位移參考物件：

相對定位位移是參考元素本身進行的，而絕對定位則相對複雜。

看一段程式碼例項:

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

絕對定位元素位移會以父輩元素中最近的定位元素（準確的說是此元素產生的包含塊）為定位參考物件；其實不光是位移，大小也會參考此包含塊，再來看一段程式碼例項:

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

最裡面定位的div元素的尺寸是參考父輩元素中最近的定位元素（準確的說是此元素產生的包含塊）的尺寸。

如果絕對定位元素的父輩元素中沒有采用定位的，那麼此絕對定位元素的參考物件是誰呢，有的人說是body，有的人會說是document，其實都不是，看MDN上的介紹，截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/03/202743l90fxbuoioof0fbb.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

以initial containing block為參考，它的尺寸是和視口是一致的，但不是由Viewport所產生的，而是由根元素<html>所產生的。

看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
body {
  height:1500px;
}
div {
  width:100px;
  height:50px;
  background:green;
  position:absolute;
  bottom:0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

如果參考物件是body或者document的話，div元素肯定要位於頁面的最底部，這裡只是位於視口的最底部。

CSS3 transform對位移參考物件也會產生影響具體可以參閱transform變換可以改變定位元素的包含塊一章節。

特別說明：定位元素經常與z-index屬性一起使用，具體可以參閱CSS z-index一章節。

相關文章