Css 如何使堆叠的div垂直向上生长？

我正在创建一个堆叠条形图。最终，酒吧将是动态的，所以我需要酒吧垂直增长。当我增加任何条的高度时，条（div）向下增长。我希望它们向上生长

我曾尝试使用

padding top

向上增加高度，但这似乎也不起作用

我希望它像一个堆叠的条形图

---

在这里，如果我尝试增加

.uc bar accept

和

.uc bar deny

上的高度，则条形图将垂直增加到下方而不是上方。

将条形图的定位条对准网格线0100200300等

问题-当条形图元素变得更高时，它们会在屏幕上向下生长，不再与条形图对齐

可能的解决方案-对条形图的条形图使用绝对位置，使用“底部”命令从父图形底部定位

使div.uc条形图包装器父对象成为div.uc条形图的子对象。 这将确保底部命令与父对象的位置相关

垂直排列.uc条包装母材，使其正确位于网格线上，例如底部：80px 现在，条形图元素的任何增长都将出现在页面上，并且图表将与网格线保持对齐

jsfiddle [https://jsfiddle.net/newschapmj1/jgdhm5ua/2/][1]

我不是一个定位专家，所以我可能错过了一个更好的方法。

---

我在这里查看了

将条形图的条形图定位在网格线0100200300等上方

问题-当条形图元素变得更高时，它们会在屏幕上向下生长，不再与条形图对齐

可能的解决方案-对条形图的条形图使用绝对位置，使用“底部”命令从父图形底部定位

使div.uc条形图包装器父对象成为div.uc条形图的子对象。 这将确保底部命令与父对象的位置相关

垂直排列.uc条包装母材，使其正确位于网格线上，例如底部：80px 现在，条形图元素的任何增长都将出现在页面上，并且图表将与网格线保持对齐

jsfiddle [https://jsfiddle.net/newschapmj1/jgdhm5ua/2/][1]

我不是一个定位专家，所以我可能错过了一个更好的方法。 我看了这里