如何定位子容器以使它们正好位于彼此之上？答案

【问题标题】：How to position subcontainers so that they sit right on top of each other?如何定位子容器以使它们正好位于彼此之上？
【发布时间】：2013-05-01 05:51:45
【问题描述】：

我有一个条形图，其中包含 5 个不同的子容器，每个子容器具有不同的高度和不同的颜色。 “鸡”子容器在吧台的底部，然后在上面应该是鸡蛋子容器，最上面是猪肉子容器，等等。

我不知道如何将鸡蛋子容器直接放在鸡肉容器的顶部，中间没有边距（我可以添加一堆 div，但这似乎是一个笨拙的解决方案）。

这是它的样子（鸡是蓝色的，鸡蛋是紫色的，等等）（注意：每个子容器的高度由 Javascript 确定）

HTML：

<div class="days">
<div class="days-container">
<div class="dairy"></div>
<div class="beef"></div>
<div class="pork"></div>
<div class="eggs"></div>
<div class="chicken"></div>
</div> <!-- end days-container-->
</div> <!-- end days -->

CSS：

 .days {
 float: left;
 height:330px;
 width: 1em;
}

.days-container {
position:relative;
height: 330px;
}

.chicken {
position: absolute;
bottom:0;
background-color: #00AAFF;
width: 1em;
}

.eggs {
width: 1em;
????
}

【问题讨论】：

标签： html css position positioning

【解决方案1】：

只需删除position:absolute;

它们是块状的，它们会自动一个接一个地前进：http://jsfiddle.net/XzU47/

【讨论】：

【解决方案2】：

您的鸡肉容器位于底部：

    position: absolute;  bottom:0;

天容器和鸡蛋不是。如果您希望它们全部位于顶部，请从您的 CSS 中删除上述语句。

【讨论】：