ซ้อน DIVs อยู่ด้านบนของกันและกัน?

เป็นไปได้หรือไม่ที่จะซ้อน DIV หลายรายการเช่น:

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

เพื่อให้ DIV ภายในทั้งหมดมีตำแหน่ง X และ Y เท่ากัน? โดยค่าเริ่มต้นพวกเขาทั้งหมดจะอยู่ด้านล่างซึ่งกันและกันโดยเพิ่มตำแหน่ง Y ตามความสูงของ DIV ก่อนหน้าล่าสุด

ฉันรู้สึกว่าลอยหรือโชว์หรือกลเม็ดอื่น ๆ อาจกัดได้?

แก้ไข: DIV หลักมีตำแหน่งที่สัมพันธ์กันดังนั้นการใช้ตำแหน่งสัมบูรณ์ดูเหมือนจะไม่ได้ผล

วางตำแหน่ง 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>

หากต้องการเพิ่มคำตอบของ Dave:

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

หากคุณหมายถึงการวางตำแหน่งหนึ่งไว้บนสุดของอีกอันหนึ่งอยู่ด้านบนสุด (ตำแหน่ง 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 สูงขึ้น ฉันหวังว่านี่จะช่วยคุณได้ :)

style="position:absolute"

ฉันวางตำแหน่ง 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

ตอนนี้คุณสามารถใช้ 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 .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}

ฉันรู้ว่าโพสต์นี้เก่าไปหน่อย แต่ฉันมีปัญหาเดียวกันและพยายามแก้ไขหลายชั่วโมง ในที่สุดฉันก็พบวิธีแก้ปัญหา:

ถ้าเรามี 2 กล่องในตำแหน่งที่แน่นอน

<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 เท่ากับ -height ดังนั้นการทำเช่นนี้:

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

ทำงานได้ดีสำหรับฉัน

ฉันมีข้อกำหนดเดียวกันกับที่ฉันได้ลองเล่นซอด้านล่าง

#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