欢迎来到 jackNEss'窝窝
I like simple mind

纯css实现元素跨浏览器的固定定位

2011年08月24日

纯css实现元素跨浏览器的固定定位

理论上呢 在页面上固定一个漂浮窗,可以使用 position:fixed 来实现,但是很遗憾地,IE6这老大不支持..所以就得另谋他法了

实现这个功能有2种方法,一个是依赖于js,另一种则是纯css实现,在这里我就贴一下纯css实现的代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>纯css实现跨浏览器的固定定位</title>
</head>
<style type="text/css">
*{ margin:0; padding:0;}
html{ _height:100%; _overflow:hidden;}
body{ _height:100%; _overflow-y:scroll;}
.fixed_box{ 
  position:fixed; 
  _position:absolute; 
  top:10px; 
  left:10px; 
  width:200px; 
  height:200px; 
  background:#1d77bc; 
  padding:10px; 
  color:#fff;
}
</style>
<body>
<div style="height:4000px;">
	
	<div class="fixed_box">欢迎来到 jackNEss 的博客</div>
	
</div>
</body>
</html>

理论上呢 这样以后做弹出层啊,悬浮窗啊那些都已经是无敌的了,完全可以告别js了,但是在实际开发项目中,如果这样设定的话 会产生一个极度恶心的bug..下面是出现bug的代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>纯css实现跨浏览器的固定定位</title>
</head>
<style type="text/css">
*{ margin:0; padding:0;}
html{ _height:100%; _overflow:hidden;}
body{ _height:100%; _overflow-y:scroll;}
.fixed_box{ 
  position:fixed; 
  _position:absolute; 
  top:10px; 
  left:10px; 
  width:200px; 
  height:200px; 
  background:#1d77bc; 
  padding:10px; 
  color:#fff;
}
.head{ position:relative; height:100px; background:#999;}
</style>
<body>
<div style="height:4000px;">
	<div class="head"></div>
	<div class="fixed_box">欢迎来到 jackNEss 的博客</div>
	
</div>
</body>
</html>



看到了吗,在ie6上面 那个头部色块也跟着那个滚动条一起动了,这个bug的触发条件:在设置了纯css实现元素在浏览器固定定位之后, 如果html的其他元素有 position:relative/absolute的话,就会产生这个bug,目前还没找到解决方案,so,自我感觉这个个 纯css实现的方式 的应用范围十分有限。

分类HTML + CSS
阅读 1,178
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS