外邊距與絕對定位

admin發表於2019-12-03

本文通過程式碼例項介紹一下絕對定位對於外邊距的影響。

預設情況下，外邊距的參考物件是父元素，但是絕對定位會對其產生影響。

首先看一段程式碼例項：

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

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201912/03/212403es2pt6tpdtk09k4d.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對上述程式碼的表現進行一下分析：

（1）.預設情況下，外邊距是以其父元素為參考的。

（2）.紅色元素沒有采用絕對定位，且左外邊距為50px。

（3）.所以紅色元素左側距離其父元素的距離是50px。

（4）.綠色元素採用絕對定位，且左外邊距為10px。

（5）.那麼的外邊距的參考物件就是其絕對定位參考物件，而不是以紅色元素為參考。

對於position:fixed固定定位也是如此，就不再距離演示了，關於定位和外邊距參閱如下文章：

（1）.絕對定位參考CSS position:absolute 絕對定位一章節。

（2）.固定定位參考CSS position:fixed 固定定位一章節。

（3）.外邊距參考CSS margin外邊距一章節。

相關文章