将DIV堆叠在一起?


115

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

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

这样所有这些内部DIV都具有相同的X和Y位置?默认情况下,它们都相互降低,从而将Y位置增加最后一个上一个DIV的高度。

我感觉某种漂浮物或展示物或其他技巧可能会咬人?

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


为了阐明我的答案,您想绝对定位内部div。
马特

Answers:


166

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


1
它似乎不起作用。也许我应该提到我有这种情况:<div style =“ position:absolute ...”> <div style =“ position:relative ...”>此</ div> <div>堆叠此</ div> <div>堆叠此</ div> </ div> </ div>

2
您要绝对定位其中具有“ stack this”的div。它确实有效-我在发布原始照片之前尝试过。如果您没有在div上放置类选择器,请调整Eric的答案中的div选择方法以选择堆栈div。
马特

1
也没有为我工作。太多的未知数留给了观众。
yan bellavance

我让div使用以下位置堆叠:相对并指定高度
yan bellavance

可能与展示道具有关?
yan bellavance

50

要添加到戴夫的答案:

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

它似乎不起作用。也许我应该提到我有这种情况:<div style =“ position:absolute ...”> <div style =“ position:relative ...”> <div>堆叠此</ div> <div>堆叠此</ div> <div>堆叠此</ div> <div>堆叠此</ div> </ div> </ div>

认为在这种情况下,您想要设置“ top:0; left:0;”。在您的div上具有“ position:relative”的位置。绝对可以对IE6进行测试,尽管我不能肯定地说它会起作用。
Eric Wendelin

10

如果您的意思是将一个放在另一个的顶部,一个放在顶部(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轴上的位置越高。希望对您有所帮助:)



5

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


4

现在,您可以使用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;
}

0

我知道这篇文章有些旧,但是我遇到了同样的问题,并试图修复了几个小时。最后我找到了解决方案:

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

对我来说很好。


0

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

#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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.