DIV'leri üst üste yığmak mı?

Birden çok DIV'yi aşağıdaki gibi biriktirmek mümkün mü:

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

Yani tüm bu iç DIV'ler aynı X ve Y konumuna mı sahip? Varsayılan olarak, hepsi birbirinin altına düşer ve Y konumunu önceki DIV'nin yüksekliğine yükseltir.

Bir tür şamandıra veya ekran veya başka bir numaranın ısırabileceğini hissediyorum.

DÜZENLEME: Üst DIV, göreceli konuma sahiptir, bu nedenle, mutlak konumu kullanmak işe yaramıyor gibi görünüyor.

Dış div'i istediğiniz gibi konumlandırın, ardından iç div'leri mutlak kullanarak konumlandırın. Hepsi birikecek.

.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>

Dave'in cevabına eklemek için:

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

Kelimenin tam anlamıyla birini diğerinin üstüne, birini üste koymaktan bahsediyorsanız (Aynı X, Y konumları, ancak farklı Z konumu), z-indexCSS özelliğini kullanmayı deneyin . Bu çalışmalı (test edilmemiş)

<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>

Bu, 3'ün üstünde 4, 2'nin üstünde 3 vb. Göstermelidir. Z-endeksi ne kadar yüksekse, öğe z ekseninde o kadar yüksek konumlandırılır. Umarım bu sana yardımcı olmuştur :)

style="position:absolute"

İş yerinde görebilmeniz için div'leri biraz kaydırarak konumlandırdım.
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

Bunu düzeltmek için artık CSS Izgarasını kullanabilirsiniz.

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

Ve bunun için css:

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

Bu yazının biraz eski olduğunu biliyorum ama aynı sorunu yaşadım ve birkaç saat düzeltmeye çalıştım. Sonunda çözümü buldum:

mutlak olarak yerleştirilmiş 2 kutumuz varsa

<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>

Ekranda bir kutu olmasını bekliyoruz. Bunu yapmak için margin-bottom'ı -height'a eşitlemeliyiz, bunu şu şekilde yaparak:

<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>

benim için iyi çalışıyor.

Kemanın aşağısında denediğim şartın aynısına sahiptim.

#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