将DIV堆叠在一起？

Question

是否可以堆叠多个DIV,如:

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

那么所有那些内部DIV都有相同的X和Y位置？默认情况下,它们都低于彼此,将Y位置增加上一个前一个DIV的高度.

我有一种浮动或显示或其他技巧可以咬人的感觉？

编辑:父DIV具有位置相对,因此,使用绝对位置似乎不起作用.

Answer 1

根据需要定位外部div,然后使用absolute定位内部div.他们都会堆积起来.

.inner {
  position: absolute;
}

Answer 2

添加到戴夫的答案:

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

Answer 3

您现在可以使用 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 4

如果你的意思是将一个放在另一个的顶部,一个在顶部(相同的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轴上的位置越高.我希望这能帮助你:)

Answer 5

所有的答案似乎都很旧:) 我更喜欢 CSS 网格以获得更好的页面布局（absolutediv 可以被页面中的其他 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>

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

如果您使用 CSS 隐藏紫色 div，您将看到蓝色 div 位于顶部。

这是一个工作链接

Answer 6

style="position:absolute"

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