zoukankan      html  css  js  c++  java
  • 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;
            100%;
            height:100%;
            overflow:auto;    
        }
        .fixed-box{
            position:fixed;
            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%  如果设置了固定的宽  那么滚动条就会在中间出现  影响美观  在不同的屏幕尺寸下  定位的宽的位置就不同  暂时只能勉强这样用了
  • 相关阅读:
    实现反转函数,即反转一个Null结尾的字符串
    给定两个字符串,确定其中一个字符串的字符重新排列后,能否变成另一个字符串
    IDL 常用字符串处理函数
    IDL创建进度条
    python中f'{}'用法
    Win10 pycharm中显示PyTorch tensorboard图
    torch.cat()和torch.stack()
    运筹学笔记6初始可行基
    运筹学笔记5单纯形法
    运筹学笔记4线性规划问题的几何特征
  • 原文地址:https://www.cnblogs.com/xiaoshujiang/p/5496675.html
Copyright © 2011-2022 走看看