为什么定位的div重叠?

商标代码

我有一个主包装div,里面有2个内容div。position两个内容div属性均设置为relative,但由于某些原因它们重叠,如下所示:

股利

我希望红色框内的div在蓝色框下,并且在弄清楚该怎么做时遇到麻烦。

#wrap {
  height: 500px;
  width: 350px;
  border: 3px solid black;
}
#upper {
  position: relative;
  width: 40%;
  height: 70%;
  top: 5%;
  left: 2%;
  border: 1px solid blue;
  text-align: center;
}
#lower {
  position: relative;
  width: 40%;
  height: 20%;
  left: 2%;
  border: 1px solid red;
}
<div id="wrap">
  <div id="upper"></div>
  <div id="lower"></div>
</div>

有人可以帮我弄清楚如何正确对齐它们吗?

尚塔努考希克

div#upperDiv的样式具有top:5%,这导致了这种情况的发生。尽管是相对的,但div#upperDiv在div#lowerDiv上占据5%的最高位。解决方案:要么从upperDiv上删除top:5%的样式,要么将相同的top样式添加到lowerDiv。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章