CSS: как расположить два элемента друг над другом, не указывая высоту?

отличный ответ,"му слишком короткий". Я искал то же самое, и после прочтения Вашего сообщения я нашел решение, которое соответствовало моей проблеме.

У меня было два элемента одинакового размера и я хотел их сложить. Поскольку каждый из них имеет одинаковый размер, то что я мог сделать, это сделать

position: absolute;
top: 0px;
left: 0px;

только на последнем элементе. Таким образом, первый элемент вставляется правильно, "толкая" высоту родителей, а второй элемент помещается сверху.

надеется, что это помогает другим людям, пытающимся укладывать элементы 2+ с одинаковой (неизвестной) высотой.

Я должен был поставить

Container_height = Element1_height = Element2_height

.Container {
    position: relative;
}

.ElementOne, .Container ,.ElementTwo{
    width: 283px;
    height: 71px;
}

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

использовать можно использовать z-индекс, чтобы установить, какой из них должен быть сверху.

на самом деле это возможно без установки absolute и указание любой высоты. Все, что вам нужно сделать, это использовать display: grid на родительский элемент и поместить потомков в той же строке и столбце.

пожалуйста, проверьте пример ниже, на основе вашего HTML. Я добавил только <span> и некоторые цвета, так что вы можете видеть результат.

вы также можете легко изменить z-index каждый из потомков элементов, чтобы манипулировать его видимостью.

.container_row{
  display: grid;
}

.layer1, .layer2{
  grid-column: 1;
  grid-row: 1;
}

.layer1 span{
  color: #fff;
  background: #000cf6;
}

.layer2{
  background: rgba(255, 0, 0, 0.4);
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

из-за абсолютного позиционирования удаление элементов из положения потока документов: absolute не является правильным инструментом для работы. В зависимости от точного макета, который вы хотите создать, Вы будете успешны, используя отрицательные поля, положение:относительное или, возможно, даже преобразование: перевод. Покажите нам пример того, что вы хотите сделать, мы можем помочь вам лучше.

конечно, проблема заключается в том, чтобы вернуть свой рост. Но как вы можете это сделать, если вы не знаете высоту заранее? Ну, если вы знаете, какое соотношение сторон вы хотите дать контейнеру (и сохранить его отзывчивым), вы можете вернуть свою высоту, добавив дополнение к другому дочернему контейнеру, выраженное в процентах.

вы даже можете добавить фиктивную div в контейнер и установить что-то вроде padding-top: 56.25% чтобы дать фиктивному элементу высоту, которая является пропорцией ширины контейнера. Это будет толкать контейнер и дать ему соотношение сторон, в данном случае 16:9 (56.25%).

заполнение и маржа используют процент ширины, это действительно трюк здесь.

после долгих испытаний я проверил, что исходный вопрос уже прав; отсутствует только несколько настроек:

• the container_row должно быть position: relative;
• дети (...), Должно быть position: absolute; left:0;
• чтобы убедиться, что дети (...) выровняйте точно над Одином другого, container_row должен иметь дополнительный стиль:
  • height:x; line-height:x; vertical-align:middle;
  • text-align:center; может, также, помочь.

вот еще одно решение с использованием display: flex вместо position: absolute или display: grid.

.container_row{
  display: flex;
}

.layer1 {
  width: 100%;
  background-color: rgba(255,0,0,0.5);  // red
}

.layer2{
  width: 100%;
  margin-left: -100%;
  background-color: rgba(0,0,255,0.5);  // blue
}

<div class="container_row">
    <div class="layer1">
        <span>Lorem ipsum...</span>
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>