<!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></title>
<style type="text/css">
html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;}
/* the core */
#wrapper{
position:relative;
width:100%;
height:100%;
overflow:auto;
}
#container{
width: 90%;
background-color:#ccc;
margin:0 auto;
}
.fixed-box{
position:fixed;
}
* html .fixed-box{
position:absolute;
z-index:100;
}
/* the sample */
#topBox, #leftBox, #bottomBox{
padding:5px;
border:1px solid #aaa;
background-color:#fee;
font-size:12px;
}
#topBox{
width:100px;
left:120px;
top:120px;
}
#leftBox{
width:150px;
left:50%;
top:180px;
/*margin:0 0 0 -370px;*/
}
#bottomBox{
width:100%;
left:0px;
bottom:0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div >
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<div style="height:500px;background-color:lightblue;"> <p>一段内容(高度500px)</p></div>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容</p>
<p>一段内容 over</p>
</div>
</div>
</div>
<div id="topBox" class="fixed-box">
<p><b>Top Fixed Position</b></p>
<p>
The ie6 "fixed" position is the same to Firefox etc. position:fixed 。
</p>
</div>
<div id="leftBox" class="fixed-box">
<p><b>Left Fixed Position</b></p>
<p>
The ie6 "fixed" position is the same to Firefox etc. position:fixed 。
</p>
</div>
<div id="bottomBox" class="fixed-box">
<p><b>Bottom Fixed Position</b></p>
<p>
The ie6 "fixed" position is the same to Firefox etc. position:fixed 。
</p>
</div>
</body>
</html>
分享到：
相关推荐
positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式，但是ie6下并不兼容这种定位 浮动导航条的样式，重要的是position:fixed;bottom:60px;(浮动导航底部距离...
IE6的兼容性问题主要出现在position：fixed上面，如何解决已经在《【CSS】IE6中的position：fixed问题与随滚动条滚动的效果》（点击打开链接）介绍过了。 下面具体说说如何利用JavaScript中的滚动事件[removed]实现...
及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案...
非IE6下的写法大家一般都清楚如何写；...}/* IE6 头部固定 */html .fixed-top{position:absolute;bottom:auto;top:[removed]eval(document.documentElement.scrollTop));}/* IE6 右侧固定 */html .fixed-r
当前主流浏览器中，chrome，firefox，ie7,8等想要固定一个元素位置，不随内容的滚动而滚动，众所周知，css中position: fixed;即可解决。
IE6 position:fixed无效在做兼容时，很是头疼，本例通过一条Internet Explorer的CSS表达式(expression)来完美的实现ie6下position:fixed效果，有需要的朋友可以参考下
position_fixed 完美兼容IE6
position:sticky用法 position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的...
关于IE6，虽然它已被微软抛弃很久了，但是由于大天朝的特殊行情（盗版）对于前端工程师来说，解决IE6兼容position:fixed的问题显得很重要。特别是你需要用到头尾悬停调用的时候
第一排给Firefox以及其他浏览器看 第二排给IE7（可能以后的IE8、IE9也是如此，谁知道呢）看 第三排给IE6以及更老的版本看 最好的应用就是可以让IE6也“支持”position:fixed，而且，配合这个原理，可以做到不引入...
CSS兼容性height/width, position:fixed, …脚本问题：Java ｓｃｒｉｐｔ 兼容性DOM, Date.getYear, scrollTop, …缺陷（bug）与特性（feature）IE: 盒模型，float，text-alignIE: filter， 资源太大，传百度网盘了...
用css实现div固定在屏幕底部,不随垂直滚动条接动而闪动,很好的实现在ie下的浮动效果,IE6 position:fixed
1、参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ... 但ie6总不支持它，所以用其他的属性来模拟（这个模拟在主流浏览器中都兼容，所以其他浏览器也不需要分开写position:fixed了）。 看效果先：[h
当用户向上或向下滚动页面到一定位置时，目标元素开始固定定位（position:fixed），当回滚到原位置时目标元素恢复到原状态，可以定制触发滚动相对屏幕位置和触发滚动方向，兼容IE6。
css样式: 复制代码代码如下: <style type=”text/css”> body{_background-... position:fixed; _position:absolute; bottom:0;_top:[removed]documentElement.scrollTop+document.documentElement.clie
最近在写一个首页返回顶部的效果，因为IE6不兼容position:fixed的原因，一直找不到好的解决办法。在Google了一下，有了点眉目，加上一点自己的开发，总算误打误撞的把问题解决了。