html - 如何将一个 DIV 类放置在另一个 DIV 类之上的特定位置？

Question

我用 CSS 和 HTML 创建了一个基本的条形图。它使用两个 DIV 类:后栏和前栏。条形高度根据 PHP 中提供的百分比值确定。条形图类是使用以下代码生成的。

.backbar
{
    color: #000;
    height: 300px;
    width: 30px; //This width is altered using PHP values later in the code
    display: inline-block;
    border: solid;
    position: absolute;
}

.bar
{
    color: #0026ff;
    height: 30px;
    width: 30px; //The height and width are also altered later on
    display: inline-block;
    border: solid;
    background: #0026ff;
}    

但是，前栏目前位于后栏顶部附近。我如何更改类代码，使前面栏的底部与后面栏的底部处于相同位置？ (如果我可以发布图片，这会更容易解释。)

Answer 1

您可以将您的 css 更改为:

.backbar {
    color: #000;
    height: 300px;
    width: 30px;
    border: solid;
    position: relative;
}
.bar {
    color: #0026ff;
    height: 10%;
    background: #0026ff;
    position: absolute;
    left:0;
    right:0;
    bottom:0;
}

<div class="backbar">
    <div class="bar"></div>
</div>