Question

let me preface this by saying I don’t really know CSS at all. I’m trying to make a performance bar using CSS and Javascript and what I have so far creates a bar background and then a bar inside that one that fills it up to the specified percentage. My problem is that the “inner bar” comes down from the top instead of up from the bottom. I could just subtract the percentage from 100 and take the absolute value, but that seems like kind of a dirty hack. I would like to just see how I could make this be aligned at the bottom and “grow” up as the height grows rather than starting at the top and growing down.

CSS Code

.cssSmall .performanceBack
{
    position: absolute;
    z-index: 1;
    height: 20px;
    width: 18px;
    top: 4px;
    left: 81%;
    background-color: Brown;
}

.cssSmall .performanceBar
{
    font-size: 6px;
    vertical-align: top;
    background-color: Orange;
}

Javascript code

this.performanceBack = gDocument.createElement("performanceBack");
this.performanceBack.className = "performanceBack";

div.appendChild(this.performanceBack);

this.performanceBar = document.createElement('div');
this.performanceBar.className = 'performanceBar';
//Hard coded value for testing
this.performanceBar.style.height = '30%';
this.performanceBack.appendChild(this.performanceBar);

Thanks.

Answer 1

Since you’ve already set .performanceBack to position: absolute I would do the same for .performanceBar but set the bottom property to 0 which will make it anchored to the bottom-left corner of .performanceBack.

.cssSmall .performanceBar
{
    font-size: 6px;
    background-color: Orange;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

You can see it in action at http://jsfiddle.net/U5V2b