Два деления с положением абсолютно совпадают друг с другом

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

Вот один метод, переведите 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>

Answer 2

Это не может быть сделано так, потому что 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>

Проверьте здесь

Если вы хотите, чтобы это было немного общим, то создайте CSS padding-bottom-05 { padding-bottom: 5px; }

, затем с помощьюhtml

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