收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 7080|回复: 9

让你的页面在ie6也能玩position:fixed【^_^】

[复制链接]
发表于 2007-12-5 12:53:30 | 显示全部楼层 |阅读模式
写在前面的话

一字一句都是打出来的,并非copy的,所以转载请注明 转自麦鸡的博客

测试通过ie6,ie7,ff2,Opera9,Safari3

我不知道现在发这问题是不是过时了(QQ空间,网易blog等,早就这么做了),但也是一个思路!!!

给你一个思路,你会发现什么呢? ^_^!

原理

在浏览器中固定位置(悬停),是不是很酷啊,可惜我们的ie6却不支持,怎么办?写hack?写js(如果我只是一个css代码工人呢)? 是不是太麻烦了呢?如果你这样想想…(为什么会悬停呢?在浏览器外面不就可以了吗?).那我们是不是把html,body元素隐藏掉了,再用div(比如<div id=body>)元素伪装成body元素,再把要悬停的元素(比如div)写在id=body元素的外层,是不是留可以了呢?^_^’


实例

我们可以先新建一个页面,命名为fixed.html,下面写开始写css

  1. /*隐藏htmml,body*/
  2. html,body{height:100%; width:100%; overflow:hidden; margin:0}  

  3. /*用div伪装body*/
  4. div#body{
  5.   position:relative;
  6.   width:100%;
  7.   height:100%;
  8.   overflow-x:auto;
  9.   overflow-y:scroll;
  10.   background:#fff;
  11.   cursor:default
  12. }  

  13. /*悬停的元素 id=fixed*/
  14. div#fixed{
  15.   position:absolute;
  16.   z-index:10;
  17.   left:100px;
  18.   top:100px;
  19.   width:400px;
  20.   height:300px;
  21.   background:#000;
  22.   color:#fff;
  23.   text-align:center;  

  24.   line-height:300px
  25. }
复制代码


html

  1. <div id="fixed">
  2.         讨厌,我怎么不会动了啊?
  3. </div>
  4. <!-div id=body 为body--->
  5. <div id="body">
  6.   <p>test1</p>
  7.   <p>test1</p>
  8.   <p>test1</p>
  9.   <p>test1</p>
  10.   <p>test1</p>
  11.   <p>test1</p>
  12.   <p>test1</p>
  13.   <p>test1</p>
  14.   <p>test1</p>
  15.   <p>test1</p>
  16.   <p>test1</p>
  17.   <p>test1</p>
  18.   <p>test1</p>
  19.   <p>test1</p>
  20.   <p>test1</p>
  21.   <p>test1</p>
  22.   <p>test1</p>
  23.   <p>test1</p>
  24.   <p>test1</p>
  25.   <p>test1</p>
  26.   <p>test1</p>
  27.   <p>test1</p>
  28.   <p>test1</p>
  29. </div>
复制代码


上面不标准哦?

标准的,实用的(实在找不到形容词了!)…

我们给写个小小的hack,使它兼容各个浏览器吧?好,请看下面


  1. /*隐藏htmml,body===//我们在这里只给ie6隐藏body,其他浏览器使用position:fixed*/
  2. /*html,body{height:100%; width:100%; overflow:hidden; margin:0}*/  
  3. /*简简单单...*/
  4. html,body{height:100%; width:100%; overflow:visible!important; overflow:hidden}

  5. /*用div伪装body*/
  6. div#body{
  7.   position:relative;
  8.   width:100%;
  9.   height:100%;
  10.   overflow-x:auto;
  11.   overflow-y:scroll;
  12.   background:#fff;
  13.   cursor:default
  14. }

  15. /*悬停的元素 id=fixed*/
  16. div#fixed{
  17.   position:fixed!important;
  18.   position:absolute;
  19.   z-index:10;
  20.   right:100px;
  21.   bottom:100px;
  22.   width:400px;
  23.   height:300px;
  24.   background:#000;
  25.   color:#fff;
  26.   text-align:center;
  27.   line-height:300px
  28. }
复制代码


这里给出演示

[[i] 本帖最后由 buliuming 于 2007-12-5 13:07 编辑 ]
发表于 2007-12-5 13:18:51 | 显示全部楼层
聪明。。。 ;-) ;-) ;-) ;-) :D :D
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-5 16:55:19 | 显示全部楼层
呵呵,好像不够吸引人....
回复 支持 反对

使用道具 举报

发表于 2007-12-5 17:09:26 | 显示全部楼层
div伪装body,这个想法不错。。
回复 支持 反对

使用道具 举报

发表于 2007-12-5 18:57:44 | 显示全部楼层
这个效果不错~什么叫div伪装body?
回复 支持 反对

使用道具 举报

发表于 2007-12-5 21:58:44 | 显示全部楼层
呵呵 我怎么没想到这么用 楼主是个愿意动脑筋的人啊
回复 支持 反对

使用道具 举报

发表于 2007-12-5 22:22:35 | 显示全部楼层
高手高手,顶顶
回复 支持 反对

使用道具 举报

发表于 2007-12-6 02:10:31 | 显示全部楼层
我想问一下 div#fixed不在div#body里面 ,如何会建立相对和绝对定位的关系.. 它在在相对谁 绝对定位?

还有 body里的单个div可以分块下载, 如果用一个大div当body用那会不会网慢的话 先是一片空白,等内容加载完了才突然显示??
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-6 12:27:42 | 显示全部楼层
原帖由 [i]yfstudio 于 2007-12-6 02:10 发表
我想问一下 div#fixed不在div#body里面 ,如何会建立相对和绝对定位的关系.. 它在在相对谁 绝对定位?

还有 body里的单个div可以分块下载, 如果用一个大div当body用那会不会网慢的话 先是一片空白,等内容加载完 ...




相对的是父容器

网慢?  那要看你如何架构你的布局了, 如果你不是乱嵌套的话,浏览器渲染不会慢的
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-6 12:28:54 | 显示全部楼层
原帖由 [i]irlvirus 于 2007-12-5 18:57 发表
这个效果不错~什么叫div伪装body?



就是用div来替代body了啊  一个思路,看你怎么运用了.
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-7-17 00:26 , Processed in 0.167546 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表