将DIV堆叠在一起？

Question

是否可以堆叠多个DIV，例如：

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

所以所有这些内部 DIV 都具有相同的 X 和 Y 位置？默认情况下，它们都在彼此下方，将 Y 位置增加上一个 DIV 的高度。

我觉得某种浮动或展示或其他技巧可能会咬人？

编辑：父 DIV 具有相对位置，因此，使用绝对位置似乎不起作用。

Answer 1

style="position:absolute"

Answer 2

根据需要定位外部 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>

Answer 3

添加到戴夫的答案：

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

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

这应该在 3 的顶部显示 4，在 2 的顶部显示 3，依此类推。 z-index 越高，元素在 z 轴上的位置就越高。我希望这对你有帮助:)

Answer 5

我知道这篇文章有点旧，但我遇到了同样的问题并尝试修复了几个小时。终于找到了解决办法：

如果我们有 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>

对我来说很好。

Answer 6

我有相同的要求，我在下面的小提琴中尝试过。

#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

Answer 7

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

Answer 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 .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}

Answer 9

我更喜欢 CSS 网格以获得更好的页面布局（absolute div 可以被页面中的其他 div 覆盖。）

.container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: yellow;
  /* important part */
  display: grid;
  place-items: center;
  grid-template-areas: "inner-div";
}

.inner {
  height: 100px;
  width: 100px;
  /* important part */
  grid-area: inner-div;
}

<div class="container">
  <div class="inner" style="background-color: white;"></div>
  <div class="inner" style="background-color: red;"></div>
  <div class="inner" style="background-color: green;"></div>
  <div class="inner" style="background-color: blue;"></div>
  <div class="inner" style="background-color: purple;"></div>
</div>

如果你用 CSS 隐藏紫色 div，你会看到蓝色 div 位于顶部。

这是一个有效的link