日期:2014-05-16  浏览次数:20326 次

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不能嵌套,必须是并列放置