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="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;">
                <p>一段内容</p>
                <p>一段内容</p>    
                <p>一段内容</p>    
                <p>一段内容</p>
                <p>一段内容</p>
                <p>一段内容</p>    
                <p>一段内容</p>    
                <p>一段内容</p>    
                <p>一段内容</p>    
                <p>一段内容</p>    
                <p>一段内容</p>    
                <p>一段内容</p>    
                <p>一段内容</p>    
                <p>一段内容</p>        
                <p>一段内容</p>    
                <p>一段内容</p>    
                <p>一段内容</p>    
          </div>    
    </div>
    <div class="fixed-box">
         <p><b>固定中间某个位置</b></p>
         <p>
               该解决方案完美实现了 position:fixed 效果,完美支持 ie5.5+, firefox, opera, chrome等主流浏览器。
         </p>    
    </div>
</body>
</html>
自己试了下  定位是没问题  问题是这个相对的div定位  宽只能100%  如果设置了固定的宽  那么滚动条就会在中间出现  影响美观  在不同的屏幕尺寸下  定位的宽的位置就不同  暂时只能勉强这样用了
posted @ 2016-05-15 23:55  小书匠  阅读(1251)  评论(0编辑  收藏  举报