Question

我对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的底部

Answer 1

无法这样做，因为Utility.SetMouseSpeed(100);旨在允许您为元素指定绝对位置。

您可以对成员元素使用position: absolute或top进行相应放置。

bottom

Check here

如果您希望通用一些，请创建CSS <div id="div1" class="divcontent"> <span>Some text</span> </div> <div id="div2" class="divcontent" style="bottom: 5px;"> <span>Some other text</span> </div>

然后使用html

padding-bottom-05 { padding-bottom: 5px; }

Answer 2

这里是一种方法，将div2向下转换高度的100％：

.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:nth-child(2) {
  transform: translateY(100%);
}

.divcontent span {
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0 3px
}

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

位置绝对重叠的两个div

2 个答案: