CSS位置

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更改为：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

CSS位置

您可以使用css通过z-indices将对象放在另一个上面。

working fiddle:

https://jsfiddle.net/n74fr6f6/

Answer 3

将这些酒吧放入容器

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

然后给出绝对位置

.chart {
    position: relative;
}
.chart-bar {
    background: #A6A6A6;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 0;
}
.backbar {
    width: 60px; /* increased length */
}

.bar {
    background: #0026ff; /* color seperator */
}

工作小提琴：http://jsfiddle.net/boay2cp9/

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

3 个答案:

CSS位置