时间戳

首页 > 解决方案 > 位置绝对重叠的两个 div

html - 位置绝对重叠的两个 div

问题描述

我对 css 完全陌生，想创建两个绝对位置的 div。这是CSS：

.divcontent {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  bottom: 5%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2;
  opacity: .8
}
.divcontent span {
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0 3px
}

这是html：

    <div id="div1" class="divcontent">
        <span>Some text</span>
    </div>
    <div id="div2" class="divcontent">
        <span>Some other text</span>
    </div>

现在这两个 div 相互重叠。我想将 div2 放在 div1 的底部

标签： htmlcss

解决方案

它不能这样做，因为position: absolute它旨在允许您为元素指定绝对位置。

您可以使用其中一个top或bottom与成员元素一起相应地放置它。

 <div id="div1" class="divcontent">
        <span>Some text</span>
    </div>
    <div id="div2" class="divcontent" style="bottom: 5px;">
        <span>Some other text</span>
    </div>

在这里检查

如果你想要它有点通用，那么创建一个 CSSpadding-bottom-05 { padding-bottom: 5px; }

然后用html

<div id="div2" class="divcontent padding-bottom-05">

推荐阅读