<html>
<head>
<title>DIV始终固定位置显示</title>
<style>
body {margin:0; padding:0 10px 0 10px;height:100%;overflow:auto;background:#333;font-size:12px;}
#wrap {display:block;bottom:0px;right:1px!important;right:18px;width:200px;line-height:30px;position:fixed;border:1px solid #fff;text-align:center;color:red; background:#000;}
*html{overflow-x:auto;overflow-y:auto;}
* html #wrap {position:absolute;}
</style>
</head>
<body>
<div style="height:3986px;"></div>
<div id="wrap">我是不会动的,只有这个地方是属于我的,在你没有更改我的位置之前。</div>
</body>
</html>
<head>
<title>DIV始终固定位置显示</title>
<style>
body {margin:0; padding:0 10px 0 10px;height:100%;overflow:auto;background:#333;font-size:12px;}
#wrap {display:block;bottom:0px;right:1px!important;right:18px;width:200px;line-height:30px;position:fixed;border:1px solid #fff;text-align:center;color:red; background:#000;}
*html{overflow-x:auto;overflow-y:auto;}
* html #wrap {position:absolute;}
</style>
</head>
<body>
<div style="height:3986px;"></div>
<div id="wrap">我是不会动的,只有这个地方是属于我的,在你没有更改我的位置之前。</div>
</body>
</html>
本文介绍了一个使用CSS定位属性实现的DIV元素始终固定显示在页面底部右侧的方法。通过设置position为fixed并定义bottom和right属性,使得该DIV元素无论页面如何滚动都保持在设定的位置不变。此外还提供了一种针对IE浏览器的兼容性解决方案。
7915

被折叠的 条评论
为什么被折叠?



