Question

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

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

那么所有那些内部DIV都有相同的X和Y位置？默认情况下，它们都会低于彼此，将Y位置增加到最后一个DIV的高度。

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

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

Answer 1

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

<style type="text/css">
.inner {
  position: absolute;
}
</style>

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

添加Dave的回答：

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

Answer 3

如果你的意思是将一个放在另一个的顶部，一个在顶部（相同的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指数越高，元素在z轴上的位置越高。我希望这有助于你：）

Answer 4

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

style="position:absolute"

Answer 6

您现在可以使用CSS Grid修复此问题。

#089 - Incorrect prefix key, the used length is longer than the key part, or the storage engine doesnt support unique prefix keys

还有CSS：

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

Answer 7

我知道这篇文章有点老了，但我遇到了同样的问题并试图修复它几个小时。最后我找到了解决方案：

如果我们有2个盒子定位absolue

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

我有同样的要求，我曾尝试过以下小提琴。

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

所有答案似乎都太老了:)我更喜欢CSS网格以获得更好的页面布局（absolute div可以被页面中的其他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 class="inner no-display" style="background-color: black;"></div>
</div>

<style>
.container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: yellow;
  display: grid;
  place-items: center;
  grid-template-areas:
                  "inners";
}

.inner {
  grid-area: inners;
  height: 100px;
  width: 100px;
}

.no-display {
  display: none;
}
</style>

这是工作中的link

将DIV堆叠在一起？

9 个答案: