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

时间: 2024-10-10 13:24:32

position:fix固定定位的相关文章

解决IE6不支持position:fixed固定定位的bug(转载范鸭)

http://blog.funya.in/csscss3/ie6-fixed-bug/ 在IE6中实现 position:fixed; 的办法: 浏览器头部固定 .fixed_top { position:fixed; top:0px; } * html .fixed_top /* IE6 头部固定 */{ position:absolute; bottom:auto; top:expression(eval(document.documentElement.scrollTop)); } 浏览器

绝对定位和固定定位

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位和固定定位</title> <style> body{ height:2000px;/*加上高度出现滚动条*/ } div{ width:100px; height:100px; } .div1{ background:red; } .di

相对定位、绝对定位、固定定位区别

position: relative; 相对定位 a.不影响元素本身特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响 position; absolute: 绝对定位 a.使元素完全脱离文档流 b.使内嵌支持宽高 c.块属性标签内容撑开宽度 d.如果有定位父级相对与定位父级发生偏移,没有定位父级相对与整个文档发生偏移 e.相对定位一般配合绝对定位一起使用 position: fixed; 固定定位 与绝对定位的特性基本一致,差别是始终相对与整个文档进行定位 问题:

解决ie6下不支持fix属性,模拟固定定位

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>模拟固定定位fix</title> 6 <style> 7 html{ height:100%; overflow:hidden;} 8 body{marg

层模型--固定定位(position:fixed)

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小, 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同. 以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px.并且拖动滚动条时位置固定不变. <!

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

IE6浏览器不支持固定定位(position:fixed)解决方案

代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> </head> <body> <div style="width

需求:页面content分为左右两栏,左侧固定定位,滚动显示,右侧亦可滚动查看

如题,content宽度为1200px,代码初版如下所示: <script type="text/javascript" >     function menuFixed(id){         $('#rightanswer').css('height', document.documentElement.clientHeight*0.86+'px');         $('#viewerPlaceHolder').css('height', document.doc

绝对定位模拟固定定位效果...

今天下班,突然发现同学在群里求救解决固定定位在移动端偏移的问题,本屌丝猛地一颤:那一天,我终于回想起来了,曾经一度被ios固定定位失效所支配的恐怖,还有被市场妹子一脸嘲讽的看着的那份屈辱...(本屌意淫一下巨人). 真是情况就是,ios对固定定位的支持有点奇葩,当固定定位的层里有input一类的能调动虚拟键盘的元素时,一旦用户聚焦这些元素,固定定位的层级中的元素会发生位移,也就是俗称的页面错乱了,本屌当时寻遍网上各种方案,试了大半天时间(其实,就是因为没钱穷屌丝一枚,没有水果手机,每次测试都要厚