css - 在固定 div 内垂直堆叠 div

Question

我有一个垂直的父容器 div，具有固定的定位和高度（以像素为单位）。我有与父级宽度相同的子级 div。我如何将这些子 div 堆叠在固定父级中？我无法通过。请帮忙。

Answer 1

它们应该已经堆叠起来了。你能详细说明你的问题吗？

HTML

<div id="container">
    <div class="stack one"></div>
    <div class="stack two"></div>
    <div class="stack three"></div>
</div>

CSS

#container {
    width: 250px;
}

.stack {
    width: 250px; height: 100px;
}

.one { background: red; }
.two { background: green; }
.three { background: orange; }

jsFiddle

更新-

阅读您的回复后，我现在更新了 CSS - jsFiddle

CSS

#container {
    position: relative;
    width: 250px; height: 300px;
}

.stack {
    position: absolute;
    width: 250px; height: 100px;
}

.one { background: red; bottom: 0; }
.two { background: green; bottom: 100px; }
.three { background: orange; bottom: 200px; }

Answer 2

如果您想静态地执行此操作，只需将每个子 div 的 top 属性设置为您想要的方式。

因此，如果这些子 div 的高度为 50px

#child1{
position:relative;
top:50px;
}
#child2{
position:relative;  
top:100px;
}

等等