在html相对布局和绝对布局

我在一个html的body中创建了两个div，第一个默认布局，第二个设置了绝对布局，为什么第二个div在第一个下面，不是绝对定位元素找祖先中设置了position：relative或者absolute的元素为参照，没找到以body参照，为什么不是第二个div把第一个div覆盖
<!DOCTYPE HTML>

Title .main{width:400px;height:400px;background:red;} .main .left{width:100px;height:100px; background:yellow;float:left;} .main .right{width:100px;height:100px; background:blue;float:right;} .test{width:400px;height:400px;background:green;position:absolute;}

原因是你给第一个类main设置了高度，却没有给第二个类test设上边缘位置。所以test默认位置是main结束位置。
想要test覆盖main，设置test的top属性为main的上边沿即可。
比如 top=0;
当然，这前提条件是你的main是有规定上界的。由于你没有给出代码，我怀疑你的main是直接写在body里的。body有默认8px的缩进，所以如果想严丝合缝覆盖，需要改成
top=8px
亲测有效。给出我的代码：


<!DOCTYPE HTML>
<style>
.main{width:400px;height:400px;background:red;}
.main .left{width:100px;height:100px; background:yellow;float:left;} 
.main .right{width:100px;height:100px; background:blue;float:right;} 
.test{width:400px;height:400px;background:green;position:absolute;top:8px;}
</style>

<body>
<div class="main">
    <div class = "left"></div>
    <div class = "right"></div>
</div>
<div class="test">
</div>
</body>

因为虽然设置了定位，但是没告诉浏览器往哪里定位，所以浏览器就按照浏览器默认的处理方式处理了