概述
<style>
.head{
width: 100%;
height: 200px;
border: 1px solid red;
}
.main{
border: 1px solid yellow;
position: relative;
}
.first{
width:48%;
height: 210px;
border: 1px solid red;
position: absolute;
left:0;
}
.second{
width: 48%;
height: 210px;
border: 1px solid red;
position: absolute;
left:50%;
}
.end{
width: 100%;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="head">1</div>
<div class="main">
<div class="first">2</div>
<div class="second">3</div>
</div>
<div class="end">4<div>
</body>由于div.first div.second脱离了文档流，所以会出现如图一所示的情况：
可以在.end里面添加
{position:relative;
top:210px;//210px为前面的div的高度
}
可以解决重叠问题。如图二所示：
最后
以上就是贪玩路人为你收集整理的html position:absolute脱离文档流解决方法-1的全部内容，希望文章能够帮你解决html position:absolute脱离文档流解决方法-1所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复