Xếp chồng các DIV lên nhau?

Có thể xếp chồng nhiều DIV như:

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

Sao cho tất cả các DIV bên trong có cùng vị trí X và Y? Theo mặc định, tất cả chúng đều đi bên dưới nhau làm tăng vị trí Y bằng chiều cao của DIV trước đó cuối cùng.

Tôi có cảm giác một số loại phao hoặc màn hình hoặc một thủ thuật khác có thể cắn?

CHỈNH SỬA: DIV chính có vị trí tương đối, do đó, sử dụng vị trí tuyệt đối dường như không hoạt động.

Định vị div bên ngoài theo cách bạn muốn, sau đó định vị các div bên trong bằng cách sử dụng tuyệt đối. Tất cả chúng sẽ xếp chồng lên nhau.

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

Để thêm vào câu trả lời của Dave:

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

Nếu bạn có nghĩa đen là đặt một cái lên đầu cái kia, một cái ở trên cùng (Cùng vị trí X, Y, nhưng khác vị trí Z), hãy thử sử dụng z-indexthuộc tính CSS. Điều này sẽ hoạt động (chưa được kiểm tra)

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

Điều này sẽ hiển thị 4 trên đầu 3, 3 trên đầu 2, v.v. Chỉ số z càng cao thì phần tử nằm trên trục z càng cao. Tôi hy vọng điều này đã giúp bạn :)

style="position:absolute"

Tôi định vị các div hơi lệch, để bạn có thể thấy nó tại nơi làm việc.
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

Bây giờ bạn có thể sử dụng CSS Grid để sửa lỗi này.

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

Và css cho điều này:

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

Tôi biết rằng bài đăng này hơi cũ nhưng tôi đã gặp vấn đề tương tự và đã cố gắng khắc phục nó trong vài giờ. Cuối cùng tôi đã tìm ra giải pháp:

nếu chúng ta có 2 hộp ở vị trí tuyệt đối

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

chúng tôi hy vọng rằng sẽ có một hộp trên màn hình. Để làm được điều đó, chúng ta phải đặt margin-bottom bằng -height, làm như sau:

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

làm việc tốt cho tôi.

Tôi đã có cùng một yêu cầu mà tôi đã thử trong fiddle dưới đây.

#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