一个叠一个 DIV？

有没有可能堆叠多个 DIV，比如:

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

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

我有种感觉，某种漂浮物或者展示品或者其他的东西可能会咬人？

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

465445 次浏览
小开

style="position:absolute"

小开
最佳答案

将外部 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>

小开

戴夫的回答是:

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

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

小开

我知道这个帖子有点老了，但是我也遇到了同样的问题，并且试着修复了几个小时。最终我找到了解决办法:

如果我们有两个盒子定位绝对

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

我们希望屏幕上只有一个框。要做到这一点，我们必须设置边距底部等于高度，所以这样做:

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

我觉得挺好的。

小开

我有相同的要求，我已经尝试在下面小提琴。

#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

小开

我定位的 div 稍微偏移，以便您可以看到它在工作。
超文本标示语言

<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

小开

现在可以使用 CSS 网格来修复这个问题。

<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;
}
小开

我更喜欢 CSS 网格为更好的页面布局(absolute div 可以被页面中的其他 div 覆盖。)

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

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

这是一个工作 链接

小开

提供 position:absolute的答案现在已经过时了。

在当前支持的浏览器中，使用 CSS 网格更容易实现同样的功能。这将确保元素仍然是页面布局的一部分(position:absolute产生的问题)。

这是一篇博客文章，解释了如何实现这一点: https://zelig880.com/how-to-stack-two-elements-on-top-of-each-other-without-using-position-absolute

这是一个带有实例的 codepen: https://codepen.io/zelig880/pen/oNdZWNa

快速代码:

.container_row{
display: grid;
}


.layer1, .layer2{
grid-column: 1;
grid-row: 1;
}


.layer1{
color: blue;
background: red;
animation-direction: reverse;
}


.layer2{
color: white;
background: blue;
}
.layer1, .layer2 {
animation-name: fade;
animation-duration: 10s;
}


@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container_row">
<div class="layer1">
I am the layer behind
</div>
<div class="layer2">
I am actually on top
</div>
</div>
<div class="container_row">
Yuppi! This line is positioned successfully! This would not have been the case with position:absolute
</div>

小开

如果你有影响其他元素位置的相关问题，你可以这样做。

<div class="container">
<div>Div 1</div>
<div>Div 2 on top of div 1</div>
<div>Div 3 on top of div 1 and 2</div>
</div>


<style type="text/css">
.container {
/* to align absolute children to relative parent */
position: relative;
}
.container > div {
/* no need for z-index, the lower div will be higher
use z-index if you want a specific div to be on top of others */
position: absolute;
}
</style>


David Antoon

提交答案