不用HACK,完美支持IE6、FF的类fixed绝对定位

Thursday, August 06, 2009 吉光片羽 1

题目感觉有点怪,这里说到了“类”,即类似。因为CSS中确实没用到背景位置固定(fixed)的属性,但却能达到固定的效果。之前为了解决IE6图层随滚动条滚动的效果,都会用到expression属性,可问题是,固定的那个层会不停的闪动,很影响视觉和页面效果。现在好了,换个思路,问题就基本解决了!思路就是,隐藏body和html的滚动条,而所看到的滚动条则是最外的一个层的。很巧妙,也很实用!

CSS样式表
html,body{
    margin:0;
  height:100%;
  overflow:hidden;
}
#div1{
  height:100%;
  overflow:auto;
  width:auto;
  background-color:gray;
}
#div2{
  width:100px;
  height:100px;
  background-color:maroon;
  z-index:100;
  top:100px;
  left:100px;
  position:absolute;  
}
运行下面的代码就可以看到效果啦:
HTML :\ Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行 运行此代码

点击这里获取该日志的TrackBack引用地址

日志标签: IE  Firefox  css  定位  xhtml  

已有人对此文发表了评论

  1. 引用该评论 犀山居士 7/21/2011 12:11:29 AM 回复
    Haha感觉不错,一些场合可以考虑使用div代替body最外层作窗口来达到模拟固定层位置的效果,顶一下!

发表评论:

邮箱网址为选填;若您注册了GRAVATAR,请填写邮箱(不会公开),否则最好不填,您可在提交评论前选择表情头像;点击他人头像可引用其评论。插入UBB

About me

Name: KandyTang
Age: 20+
Location: Guilin, China
QQ: 121885959
Email: KandyT@qq.com

My Works

中文酷博聚合 汽车手绘·视频·教程 史努比(中文)网 免费的PJBlog皮肤 淘宝创意导购 桂林{摄影}品牌

Gallery

Unnamed Album

Unnam... (4)

复线文字LOGO设计

复线文字L... (10)

订书钉的创意-微型城市

订书钉的创... (4)

2010元宵烟火

2010元宵烟火 (7)

国外贺卡设计欣赏

国外贺卡设计欣赏 (20)