随笔-42  评论-578  文章-1  trackbacks-0

接触CSS已有相当长一段时间,我们竟然没有留意position:fixed的用法。

我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed。我平时比较常用absolute和relative,而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”吧。

前段时间,在做一个项目时需要使一个层相对于浏览器边框固定,那时用position:absolute试了下,发觉absolute是对网页边框而言的。后来,上网查了一些根据滚动条的移动,动态地改变left和top的值的JavaScript语句,虽然能实现了类似的效果,但滚动条移动时,那个层晃来晃去的,感觉不好看,想要一种能使层固定不动的做法。

且看下面的代码:

<style type="text/css">
<!--
#help{
    width:30px;
    height:20px;
    background-color:green;
    position:fixed;
    left:60px;
    top:100px;
}
-->
</style>

我们用上面这段代码来定义页面上的一个层“help”(id=“help”)。这样就能实现我们想要的效果了。

在IE8、Firefox、Opera、Google等浏览器中测试,都没有问题,唯独低版本的IE中,这个属性无效。



本文原创,转载请注明出处,谢谢!http://www.blogjava.net/rongxh7(心梦帆影JavaEE技术博客)
    

posted on 2009-11-22 14:58 心梦帆影 阅读(84923) 评论(25)  编辑  收藏 所属分类: Web前端开发

评论:
# re: CSS的position:fixed的使用 2009-11-23 08:58 | 没意思
ie6不支持,再好用也是白搭。  回复  更多评论
  
# re: CSS的position:fixed的使用 2012-08-29 11:58 | 实打实
宽度不起作用,一样是白搭  回复  更多评论
  
# re: CSS的position:fixed的使用[未登录] 2012-09-19 14:16 | 海纳百川
我需要这个功能,试试。  回复  更多评论
  
# re: CSS的position:fixed的使用 2012-11-28 22:22 | 瑞士军刀
我测试了这几个属性,都是一样的。  回复  更多评论
  
# re: CSS的position:fixed的使用[未登录] 2012-11-29 13:58 | easy
就不能早动动脑子吗????@没意思
  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-01-19 08:49 | 包装设计
喜欢这个功能。
在其实网站看到的,哈哈
我想要导航跟随着页面移动  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-01-19 14:27 | 包装设计
终于学会啦,不过他为什么不是居中的,还是不明白,搞不懂啊  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-04-10 13:13 | IMzhengfei
再加上foat定位就好了啊。剧中就加 float:center; @包装设计
  回复  更多评论
  
# re: CSS的position:fixed的使用[未登录] 2013-05-16 13:28 | ddd
呵呵,有float:center?还是我孤陋寡闻?@IMzhengfei
  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-05-31 19:15 | 68网
学习了,正在查相关内容,给你送给IP  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-07-09 14:27 | txt小说下载
这个标签的具体意思是什么?我从百度搜索过来的,望解答。  回复  更多评论
  
# re: CSS的position:fixed的使用[未登录] 2013-09-06 17:00 | 小张
@没意思
都什么年代了再用ie6就是鬼了  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-10-07 16:16 | mary
@小张
真的还有很多人用的是ie6,前端工程师的痛啊~  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-10-08 11:46 | 创鑫阳光
博主对css了解,想问下ie6下透明图片如何处理,网上找的都实现不了  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-10-29 14:33 | xwb
@ddd
么有吧  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-11-04 13:29 | cideacc
学习了,真的很需要这个  回复  更多评论
  
# re: CSS的position:fixed的使用 2013-11-28 17:16 |
@包装设计
html{100%;}
body{100%;}
.box{ width:100px;
height:200px;
background:#ccc;
position:fixed;
left:50%;
top:0;
margin-left:-50px;(margin-left:1/2宽)
}就可以居中了。  回复  更多评论
  
# re: CSS的position:fixed的使用 2014-01-13 11:54 | 的膏锋锷
这就是你们前端犯贱了,再多也只是少数,不管他们就好了。等他们用ie6上网,各种网页全部变形的时候自己就会升级或换浏览器了。@mary
  回复  更多评论
  
# re: CSS的position:fixed的使用[未登录] 2014-02-20 16:51 | zxf
说得对 网页变形 顾客会自动考虑升级的呢  回复  更多评论
  
# re: CSS的position:fixed的使用 2014-06-06 11:58 | cwk44
@mary 我的个人网站直接把用ie6的转跳到下载浏览器的页面。不然html5怎么普及...仁慈的网站都没办法用好看的页面效果。  回复  更多评论
  
# re: CSS的position:fixed的使用 2015-05-08 12:24 | 小叶
为什么我写了这个属性,只有页眉实现了,页脚却没反应。整个页眉导航都不出来???求解???  回复  更多评论
  
# re: CSS的position:fixed的使用 2015-05-08 12:25 | 小叶
@小叶
是页脚不出来,说错了。。
  回复  更多评论
  
# re: CSS的position:fixed的使用[未登录] 2015-07-27 13:18 | 111
我写了  回复  更多评论
  
# re: CSS的position:fixed的使用[未登录] 2015-07-27 13:19 | @小菜鸟
我写了position:fixed; 但是元素一下子就在页面上消失了,怎么办?急急急!!  回复  更多评论
  
# re: CSS的position:fixed的使用 2015-10-27 15:18 | al
@没意思
有谁的机器用ie 6?   回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: