Укладка DIV друг на друга?

Можно ли складывать несколько DIV, например:

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Итак, все эти внутренние DIV имеют одинаковые позиции X и Y? По умолчанию все они идут ниже друг друга, увеличивая положение Y на высоту последнего предыдущего DIV.

У меня такое ощущение, что какой-то плавающий или дисплей или другой трюк может укусить?

EDIT: родительский DIV имеет относительную позицию, поэтому использование позиции absolute не работает.

Ответ 1

Расположите внешний div как хотите, затем разместите внутренний div, используя абсолют. Они все сложатся.

.inner {
  position: absolute;
}

<div class="outer">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
</div>

Ответ 2

Чтобы добавить к ответу Дэйва:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }

Ответ 3

style="position:absolute"

Ответ 4

Если вы подразумеваете, что буквально помещая один поверх другого, один сверху (одни и те же X, Y позиции, но другая позиция Z), попробуйте использовать атрибут z-index CSS. Это должно работать (непроверено)

<div>
    <div style='z-index: 1'>1</div>
    <div style='z-index: 2'>2</div>
    <div style='z-index: 3'>3</div>
    <div style='z-index: 4'>4</div>
</div>

Это должно показать 4 в верхней части 3, 3 в верхней части 2 и т.д. Чем выше z-индекс, тем выше элемент расположен на оси z. Надеюсь, это помогло вам:)

Ответ 5

Я расположил элементы div немного смещенными, чтобы вы могли видеть это на работе.
HTML

<div class="outer">
  <div class="bot">BOT</div>
  <div class="top">TOP</div>
</div>

CSS

.outer {
  position: relative;
  margin-top: 20px;
}

.top {
  position: absolute;
  margin-top: -10px;
  background-color: green;
}

.bot {
  position: absolute;
  background-color: yellow;
}

https://codepen.io/anon/pen/EXxKzP

Ответ 6

Я знаю, что этот пост немного стар, но у меня была такая же проблема, и я попытался исправить это несколько часов. Наконец, я нашел решение:

если у нас есть 2 ящика, помещенных absolue

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>

мы ожидаем, что на экране появится одна коробка. Для этого мы должны установить margin-bottom равным -hight, поэтому выполните следующие действия:

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>

отлично работает для меня.

Ответ 7

У меня было такое же требование, которое я пробовал в скрипте ниже.

#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}

#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview

Ответ 8

Теперь вы можете использовать CSS Grid, чтобы это исправить.

<div class="outer">
  <div class="top"> </div>
  <div class="below"> </div>
</div>

И CSS для этого:

.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .top {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}