css显示倒置柱状图，认识bottom属性

使用CSS+DIV实现如下倒置的柱状图，主要是使用b标签实现

                          <div class="leftFloat labelHotContainer">
				      <span class="labelHot"><b class="labelHotValue labelHotValue1"> <em>2012</em></b></span>
					  <span class="labelHot"><b class="labelHotValue labelHotValue2"> <em>2012</em></b></span>
					  <span class="labelHot"><b class="labelHotValue labelHotValue3"> <em>2012</em></b></span>
					  <span class="labelHot"><b class="labelHotValue labelHotValue4"> <em>2012</em></b></span>
					  <span class="labelHot"><b class="labelHotValue labelHotValue5"> <em>2012</em></b></span>
					  <span class="labelHot"><b class="labelHotValue labelHotValue6"> <em>2012</em></b></span>
					  <span class="labelHot"><b class="labelHotValue labelHotValue7"> <em>2012</em></b></span>				                  </div>

#rightContent .labelHotContainer{
	width:100px;
	margin-top: 10px;
	margin-left: 20px;
}
#rightContent .labelHotContainer .labelHot{
	display:block;
	float:left;
	height:30px;
	width:7px;
	margin-right: 2px;
}
#rightContent .labelHotContainer .labelHotValue{
	position:relative;
	border-bottom: 1px solid #A8C082;
	background: #B9D38F;
	width: 7px;
	display: block;
}
#rightContent .labelHotContainer .labelHotValue1{
	height:10%;
}
#rightContent .labelHotContainer .labelHotValue2{
	height:30%;
}
#rightContent .labelHotContainer .labelHotValue3{
	height:40%;
}
#rightContent .labelHotContainer .labelHotValue4{
	height:50%;
}
#rightContent .labelHotContainer .labelHotValue5{
	height:70%;
}
#rightContent .labelHotContainer .labelHotValue6{
	height:80%;
}
#rightContent .labelHotContainer .labelHotValue7{
	height:100%;
}
#rightContent .labelHotContainer em{
   position:absolute;
   display:none;

}

但是如果要是柱状图正着显示呢？，就得使用css中的bottom属性

定义和用法

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。

注释：如果 "position" 属性的值为 "static"，那么设置 "bottom" 属性不会产生任何效果。

说明

对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。

对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

所以，需要将labelHotValue的css加上position：absolute；bottom:0;

#rightContent .labelHotContainer .labelHotValue{
	border-bottom: 1px solid #A8C082;
	background: #B9D38F;
	width: 7px;
	display: block;

        position:absolute;
	bottom: 0;
}