日期:2014-05-16 浏览次数:20326 次
项目中某页面需要固定某个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不能嵌套,必须是并列放置