博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
position:fix固定定位
阅读量:6040 次
发布时间:2019-06-20

本文共 1143 字,大约阅读时间需要 3 分钟。

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%  如果设置了固定的宽  那么滚动条就会在中间出现  影响美观  在不同的屏幕尺寸下  定位的宽的位置就不同  暂时只能勉强这样用了

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

你可能感兴趣的文章
记录锁
查看>>
JSONObject与JSONArray的使用
查看>>
[SQL Server] 数据库日志文件自动增长导致连接超时的分析
查看>>
【常见Web应用安全问题】---6、Script source code disclosure
查看>>
<html:form>标签
查看>>
除了《一无所有》,我一无所有
查看>>
每日英语:China Seeks to Calm Anxiety Over Rice
查看>>
C++中struct和class的区别 [转]
查看>>
C++ ofstream和ifstream详细用法
查看>>
Mysql 连接查询 Mysql支持的连接查询有哪些
查看>>
Hive Streaming 追加 ORC 文件
查看>>
打开Apache自带的Web监视器
查看>>
eclipse插件
查看>>
Android笔记:通过RadioGroup/RadioButton自定义tabhost的简单方法
查看>>
ELCSlider
查看>>
XCode工程中 Targets详解
查看>>
Ext.Msg.prompt的高级应用
查看>>
Postgres 中 to_char 格式化记录
查看>>
关于联合索引
查看>>
开源 java CMS - FreeCMS2.7 登录移动端管理中心
查看>>