絕對定位對margin外邊距的影響

antzone發表於2017-03-27

關於什麼是絕對定位和外邊距這裡就不多介紹了，具體可以參閱以下兩篇文章。

（1）.絕對定位可以參閱CSS 絕對定位一章節。

（2）.外邊距可以參閱CSS 外邊距一章節。

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

程式碼例項如下:

[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;
}
#antzone{
  width:100px;
  height:50px;
  background:green;
  position:absolute;
  margin-left:10px;
  left:0px;
}
</style>
</head>
<body>
<div id="box">
  <div id="antzone"></div>
</div>
</body>
</html>

由上面的程式碼可以看出，元素的margin外邊距的參考物件由原來的父元素，變成了絕對定位參考元素。

相關文章