求大神幫忙指導解釋下，這個效果怎么會這樣？
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>div test2</title>
?? ??? ?<style type="text/css">
?? ??? ?div{
?? ??? ??? ?border:1px solid red;?
?? ??? ?}
?? ??? ?#box1{
?? ??? ??? ?position: fixed;
?? ??? ??? ?background-color: green;
?? ??? ?}
?? ??? ?#box2{
?? ??? ??? ?position: relative;
?? ??? ??? ?background-color: red;
?? ??? ???? margin-top: 100px;
?? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div id="box1"><img src="img/logo.png"></div>
?? ??? ?<div id="box2"><img src="img/ban2.jpg"></div>
?? ??? ?<div></div>
?? ??? ?<img src="img/ban2.jpg">
?? ??? ?</body>
</html>
如上代碼，box1的fixed定位被box2的margin干擾了，
解決方法可以把margin改成padding，或者在margin上改positon為absolute，
但是就是不理解出錯的原理到底是什么？求大神指導下，謝謝。
2018-09-11
maargin重疊？