qq_44187267 2019-04-19 14:15 采纳率: 0%
浏览 1949

在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;}

  • 写回答

2条回答 默认 最新

  • xiongyuanxy 2019-04-19 14:32
    关注

    原因是你给第一个类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>
    评论

报告相同问题？

悬赏问题

  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制
  • ¥20 usb设备兼容性问题
  • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊
  • ¥15 安装svn网络有问题怎么办