CSS+DIV固定位置,不随滚动条而滚动

原创于 2013-12-18 10:04:52 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

div+css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS实现固定位置元素与滚动内容相结合的布局方法。通过设置特定样式，可以使某些元素即使页面滚动也保持可见。具体包括html及body的基础样式设定、虚拟主体区域的滚动效果配置以及绝对定位元素的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS部分:
<style type="text/css">
html,body{ overflow:hidden; margin:0px; width:100%; height:100%; }
.virtual_body{width:100%; height:100%; overflow-y:scroll; overflow-x:auto; }
.fixed_div{position:absolute; z-index:2009; bottom:0px; left:5%; width:88%; height:30px; border:1px solid red; background:#e5e5e5;}
</style>

DIV部分:
<div class="fixed_div">I'm still here!</div>
<div class="virtual_body">
<!-- body begin -->
<div style="height:1000px; width:500px; background:#ccc">contents</div>
<!-- body over -->
</div><!-- end virtual_body -->