DIV를 서로 쌓아 두나요?

다음과 같이 여러 DIV를 쌓을 수 있습니까?

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

모든 내부 DIV가 동일한 X 및 Y 위치를 갖도록? 기본적으로 그들은 모두 서로 아래로 이동하여 마지막 이전 DIV의 높이만큼 Y 위치를 증가시킵니다.

나는 어떤 종류의 플로트 또는 디스플레이 또는 다른 트릭이 물릴 수 있다고 생각합니까?

편집 : 상위 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-indexCSS 속성을 사용해보십시오 . 이것은 작동합니다 (예상되지 않음)

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

3 개 위에 4 개, 2 개 위에 3 개 등이 표시됩니다. 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 그리드를 사용하여이 문제를 해결할 수 있습니다.

<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