在固定 div 内垂直堆叠 div答案

【问题标题】：Vertically Stack divs inside fixed div在固定 div 内垂直堆叠 div
【发布时间】：2013-07-11 17:21:52
【问题描述】：

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

【问题讨论】：

感谢大家的回复。我的问题是我的容器有一个固定的像素高度。它不是动态调整大小。高度是固定的。我希望我的孩子被堆叠（自下而上），就像你把盘子放在桶里一样。通常，孩子们会坚持到顶部。我希望我的孩子们沉到水底。

【解决方案1】：

如果你想静态地做，只需将每个子 div 的 top 属性设置为你想要的。

所以如果这些子 div 的高度是 50px

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

等等

【讨论】：

【解决方案2】：

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

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

【讨论】：