position：fix固定定位

最新推荐文章于 2023-06-04 22:58:10 发布

weixin_33781606

最新推荐文章于 2023-06-04 22:58:10 发布

阅读量192

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/xiaoshujiang/p/5496675.html

版权

position：fix固定定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE下的纯CSS完美position:fixed实现方案</title>

<style type="text/css">

 html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;}
 .wrapper{
 position:relative;
 width:100%;
 height:100%;
 overflow:auto;
 }
 .fixed-box{
 position:fixed;
 width:100px;
 right:0px;
 bottom:0px;
 background-color:#fee;
 }
 * html .fixed-box{
 position:absolute;
 z-index:100;
 }
</style>

</head>

<body>
 <div class="wrapper">
 <div style="height:2000px;">
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 一段内容
 </div>
 </div>
 <div class="fixed-box">
 固定中间某个位置
 
 该解决方案完美实现了 position:fixed 效果，完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
 
 </div>
</body>
</html>
自己试了下 定位是没问题 问题是这个相对的div定位 宽只能100% 如果设置了固定的宽 那么滚动条就会在中间出现 影响美观 在不同的屏幕尺寸下 定位的宽的位置就不同 暂时只能勉强这样用了

转载于:https://www.cnblogs.com/xiaoshujiang/p/5496675.html

weixin_33781606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position：fix固定定位

position：fix固定定位<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="t...
复制链接

扫一扫