CSS position:relative 相對定位

admin發表於2018-08-03
CSS

一.相對定位基本概念:

相對定位與絕對定位相比簡單一點，絕對定位可以參閱CSS position:absolute 絕對定位一章節。

兩者主要區別：

（1）.相對定位是相對元素本身進行偏移。

（2）.不會使元素脫離文件流，元素的初始位置佔據的空間會被保留。

以下程式碼可以將元素設定為相對定位:

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

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

具體定位屬性解析：

（1）.top：規定絕對定位元素距離定位前元素本身頂部的距離。

（2）.bottom：規定絕對定位元素距離定位前元素本身底部的距離。

（3）.left：規定絕對定位元素距離定位前元素本身左部的距離。

（4）.bottom：規定絕對定位元素距離定位前元素本身底部的距離。

圖示如下：

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

淺色是元素相對定位之前的位置，深色是定位後的位置。

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

二.相對定位參考元素:

可以使用top、right、bottom和left屬性設定相對定位元素的偏移量。

相對定位的偏移參考元素是元素本身。

程式碼例項:

[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:relative;
  left:50px;
  top:30px;
  margin:40px;
}  
</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"> 
.box{ 
  width:400px; 
  height:400px; 
  background-color:green; 
  margin:50px; 
} 
.ant-1{ 
  width:100px; 
  height:100px; 
  background-color:red; 
  position:relative; 
  left:60px; 
  top:50px; 
} 
.ant-2{ 
  width:100px; 
  height:100px; 
  background-color:blue 
} 
</style> 
</head> 
<body> 
<div class="box"> 
  <div class="ant-1"></div> 
  <div class="ant-2"></div> 
</div> 
</body> 
</html>

儘管ant-1元素產生了偏移，但是ant-2元素並沒有填補它的原來的位置，可以看出相對定位元素沒有脫離文件流，原來的位置依然會被保留。

相關文章