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%  如果设置了固定的宽  那么滚动条就会在中间出现  影响美观  在不同的屏幕尺寸下  定位的宽的位置就不同  暂时只能勉强这样用了
  • 相关阅读:
    【Shell】Shell编程之while循环命令
    【Shell】Shell编程之grep命令
    【Shell】Shell编程之awk命令
    【Shell】Shell编程之sed命令
    【MySQL】MySQL之示例数据库Sakila下载及安装
    关于JAVA项目报表选型过程
    关于HSQLDB访问已有数据库文件的操作说明
    为什么要用 C# 来作为您的首选编程语言
    ThinkPHP_5对数据库的CURL操作
    使用ECharts画K线图
  • 原文地址:https://www.cnblogs.com/xiaoshujiang/p/5496675.html
Copyright © 2011-2022 走看看