把女主角堆在一起?

Is it possible to stack up multiple DIVs like:

是否可以堆叠多个div，比如:

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

So that all those inner DIVs have the same X and Y position? By default they all go below each other increasing the Y position by the height of the last previous DIV.

那么所有的内部div都有相同的X和Y位置?默认情况下，它们都向下移动，以上一个DIV的高度增加Y的位置。

I have a feeling some sort of float or display or other trick could bite?

我有一种飘飘欲仙的感觉或显示或其他的诡计可以咬?

EDIT: The parent DIV has position relative, so, using position absolute does not seem to work.

编辑:父DIV有位置相对，所以使用位置绝对似乎不奏效。

7 个解决方案

#1

121

Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.

根据需要放置外部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>

#2

To add to Dave's answer:

戴夫回答说:

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

#3

style="position:absolute"

风格= "绝对位置:"

#4

If you mean by literally putting one on the top of the other, one on the top (Same X, Y positions, but different Z position), try using the z-index CSS attribute. This should work (untested)

如果你的意思是把一个放在另一个上面，一个放在上面(相同的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>

This should show 4 on the top of 3, 3 on the top of 2, and so on. The higher the z-index is, the higher the element is positioned on the z-axis. I hope this helped you :)

这个应该是4在3上面，3在2上面，等等。z指数越高，元素在z轴上的位置就越高。我希望这对你有帮助。

#5

I positioned the divs slightly offset, so that you can see it at work.
HTML

我将divs稍微偏移了一点，这样你就可以看到它在工作。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

#6

I know that this post is a little old but I had the same problem and tried to fix it several hours. Finally I found the solution:

我知道这篇文章有点旧了，但我也有同样的问题，我试着花了几个小时来解决它。最后我找到了解决方案:

if we have 2 boxes positioned absolue

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

we do expect that there will be one box on the screen. To do that we must set margin-bottom equal to -height, so doing like this:

我们希望屏幕上有一个盒子。要做到这一点，我们必须将边距设为-高度，这样做:

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

works fine for me.

对我来说很不错。

#7

I had the same requirement which i have tried in below fiddle.

我也有同样的要求，我在下面试过。

#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

#1

121