js浮动效果

项目中某页面需要固定某个div内容，实际需求是这样的，有个评分用的表格，页面下面有实时计算总分的小表格，由于评分用的表格很长，导致总分只要拉到最下面才能看见，现在想把总分的小表格固定在底部，不随滚动条的滚动改变位置，当时在考虑问题解决方案时，总是想着怎样获取页面的高度以及滚动条的高度，然后通过加加减减之类的实现，实在太复杂，而且根本取不到所需要的页面高度，后来搜索发现，其实仅仅用css就可以实现这个功能

#Main {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
#ToolBar {
position:absolute;
bottom:0px;
right:16px;
width:100%;
height:20px;
text-align:center;
background:#ccc;
z-index:2;
overflow:hidden;
}

 技巧就在于z-index上，z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。使用层概念，再使用绝对位置就很容易实现了，但是有一点要注意，页面中使用不同层的div不能嵌套，必须是并列放置