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

Ответ 1

Прежде всего, вы действительно должны включать положение на абсолютно позиционированных элементах или вы столкнетесь с нечетным и запутанным поведением; вы, вероятно, захотите добавить top: 0; left: 0 в CSS для обоих ваших абсолютно позиционированных элементов. Вы также захотите иметь position: relative на .container_row, если вы хотите, чтобы абсолютно позиционированные элементы были помещены относительно их родителя, а не тела документа:

Если элемент имеет "position: absolute", содержащий блок устанавливается ближайшим предком с "положением" "абсолютного", "относительного" или "фиксированного"...

Ваша проблема в том, что position: absolute удаляет элементы из обычного потока:

Он полностью удаляется из нормального потока (он не влияет на последующих братьев и сестер). Абсолютно позиционированная коробка устанавливает новый содержащий блок для нормальных детей потока и абсолютно (но не фиксированных) позиционированных потомков. Однако содержимое абсолютно позиционированного элемента не распространяется ни на какие другие поля.

Это означает, что абсолютно позиционированные элементы не влияют на размер родительского элемента, а ваш первый <div class="container_row"> будет иметь высоту нуля.

Таким образом, вы не можете делать то, что вы пытаетесь сделать с абсолютно позиционируемыми элементами, если не знаете, насколько они высоки (или, что то же самое, вы можете указать их высоту). Если вы можете указать высоты, вы можете установить одинаковые высоты на .container_row, и все будет выстроено; вы также можете поставить margin-top на второй .container_row, чтобы оставить место для абсолютно позиционированных элементов. Например:

http://jsfiddle.net/ambiguous/zVBDc/

Ответ 2

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

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

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

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

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

Ответ 3

На самом деле это возможно без 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>

Ответ 4

Мне пришлось установить

Container_height = Element1_height = Element2_height

.Container {
    position: relative;
}

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

.ElementOne {
    position:absolute;
}

.ElementTwo{
    position:absolute;
}

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

Здесь другое решение, использующее 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>