Css 将堆叠的div放置在容器底部

我正在用PHP构建一个带标线的条形图。我需要它看起来像这样：

目前，我可以将灰色和红色值叠加起来，但它们位于.graph容器的顶部。如何在底部对齐它们？我尝试了垂直对齐：底部，但它并没有真正起作用

<div class="graph">
    <div class="bar">
        <div class="views" style="height:'.$showViews.'px"></div>
        <div class="actions" style="height:'.$showActions.'px"></div>

    </div>
</div>

---

谢谢。

刚刚在CSS中添加了

位置：相对值

这是修改后的代码

.graph .bar .views 
{  
background-color: #ccc; 
height:10px; /*height can be added dynamically*/
position:relative;
}
.graph .bar .actions 
{
background-color: red;
position:relative;
height:20px;
}

HTML看起来和发布的一样

<div class="graph">
    <div class="bar">
            <div class="views" style="height:'.$showViews.'px"></div>
            <div class="actions" style="height:'.$showActions.'px"></div>
        </div>
    <div class="bar">
            <div class="views" style="height:'.$showViews.'px"></div>
            <div class="actions" style="height:'.$showActions.'px"></div>
        </div>
</div>



这是演示
 
位置：绝对
会让你的生活更轻松

这是一把小提琴：


基本上，我们使用
position:absolute
将元素堆叠在一个元素之上。通过给父元素定位（在我们的例子中为“
relative
”），我们可以相对于父元素定位堆叠的元素。我们设置
底部
，
左侧
，以及
右侧
，然后使用内联样式（基于百分比，基于父级）定义
高度
。
HTML并不是真正用于精确表示，也许基于SVG的解决方案更容易？.graph.bar{position:absolute；bottom:0；}；。图{位置：相对；}？
<div class="graph">
    <div class="bar">
            <div class="views" style="height:'.$showViews.'px"></div>
            <div class="actions" style="height:'.$showActions.'px"></div>
        </div>
    <div class="bar">
            <div class="views" style="height:'.$showViews.'px"></div>
            <div class="actions" style="height:'.$showActions.'px"></div>
        </div>
</div>