Question

我有这样的div设置：

<div class ="outer">
    <div class = "inner"></div>
</div>

使用CSS如此：

.outer {
width: 300px;
height: 200px;
background: red;
}
.inner {
position: absolute;
width: 200px;
height: 50px;
background: black;
opacity: .5;
}

所以基本上一个div堆叠在另一个div的顶部。但是，我希望顶部div位于底部并且在父div的中心，而不是左上角。我该怎么做？

Answer 1

听起来你希望内部div绝对位于外部div中，在这种情况下，这应该有效：

.outer {
position: relative;
width: 300px;
height: 200px;
background: red;
}
.inner {
position: absolute;
width: 200px;
height: 50px;
bottom: 0px;
left: 50px;
background: black;
opacity: .5;
}

Answer 2

给出一个空位：相对

给出内部div位置：绝对和底部：0px;左：0像素;或者你喜欢的任何地方。

赋予外部div位置非常重要：相对。如果不是，有时它会工作有时不会。当然，它不会像所有东西一样在非常老的Internet Explorer中工作。

绝对元素没有高度所以如果你不能使用指定的（如身高：120px）你就是f ***。你只能通过javascript来检查一个绝对元素的高度并添加特殊边距。

如果内部很少，可以确定哪个容器位于顶部，您可以使用z-index。

对中/底部堆叠div？

2 个答案: