請教一個問題,關于盒子套盒子的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
.body{ margin:0; padding:0;}
.top{ height:100px; background:#00F;}
.main{ width:800px; height:800px; background:#F00; margin:0 auto;}
.left{ width:400px; height:400px; ?background:yellow; position: absolute; top:0px; left:0; ?}
.right{ width:200px;height:400px; background:#0F0; position: absolute; top:0; right:0;
}
.sub_main{ width:100px; height:800px; left:50px; background:#F0F; margin:0px 200px 0px 400px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="sub_main"></div>
</div>
<div class="foot"></div>
</body>
</html>
為什么會是這樣,不應該是浮動在main里面的嗎?
2016-08-09
position: absolute 的設置使left和right這兩個DIV脫離了標準文檔流,此時父元素main如果不設置定位,就以<html>為偏移參考基準。父元素設置定位,那么就會以父元素作為偏移參照基準
解決方法:父元素設置相對定位
.main{ width:800px; height:800px; background:#F00; margin:0 auto; position:relative;}