当我在做一个小项目时,遇到了一个难题,让我想不通。为什么#appHead中的div会导致#windowBody向下移动?有什么想法吗?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Atlas - Valencia College</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css" type="text/css">
<!--<script type="text/javascript" src="scripts.js"></script-->
</head>
<body>
<div id="bgGrad"></div>
<div id="windowTop">
</div>
<div id="windowBody">
<div id="appEnv">
<div id="appHead">
<div style="margin-top:20px;height:20px;"></div>
</div>
</div>
</div>
<div id="windowFoot">
</div>
</body>
</html>
CSS
body{ 背景:url("lol.png"); 边距:0; } #appEnv{ 宽度:100%; 高度:100%; 顶部:0; 底部:0; 左侧:0; 右侧:0; 外轮廓:dotted 1px blue; } #appHead{ 高度:100px; } #windowBody{ 定位:绝对; 顶部:0; 宽度:100%; 底部:0; }
即使我删除了所有的绝对定位,情况仍然是这样,但我可能做错了。