Html 将 DIV 堆叠在一起？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1909648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stacking DIVs on top of each other?
提问by Tower
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 具有相对位置，因此，使用绝对位置似乎不起作用。
回答by Matt
Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.
根据需要定位外部 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>回答by Eric Wendelin
To add to Dave's answer:
添加到戴夫的答案：
div { position: relative; }
div div { position: absolute; top: 0; left: 0; }
回答by Jimmie Lin
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-indexCSS attribute. This should work (untested)
如果您的意思是将一个放在另一个的顶部，一个在顶部（相同的 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>
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 :)
这应该在 3 的顶部显示 4，在 2 的顶部显示 3，依此类推。z-index 越高，元素在 z 轴上的位置就越高。我希望这对你有帮助:)
回答by Dave Swersky
style="position:absolute"
style="position:absolute"
回答by nycynik
I positioned the divs slightly offset, so that you can see it at work.
HTML
我将 div 稍微偏移了一些位置，以便您可以在工作中看到它。
HTML
<div class="outer">
<div class="bot">BOT</div>
<div class="top">TOP</div>
</div>
CSS
CSS
.outer {
position: relative;
margin-top: 20px;
}
.top {
position: absolute;
margin-top: -10px;
background-color: green;
}
.bot {
position: absolute;
background-color: yellow;
}
回答by Moses Gitau
You can now use CSS Grid to fix this.
您现在可以使用 CSS Grid 来解决此问题。
<div class="outer">
<div class="top"> </div>
<div class="below"> </div>
</div>
And the css for this:
以及用于此的 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;
}
回答by Krzysztof Jarosz
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 个绝对定位的盒子
<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:
我们确实希望屏幕上有一个盒子。为此，我们必须将 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>
works fine for me.
对我来说很好用。
回答by Raphael
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;
}
