请叫我一米

对于 IE6 也可以使用纯 CSS 来实现 position:fixed 的效果。直接上代码吧。
先是结构。

    <div class="container">
        我是IE6，使用 absolute 模拟 fixed.</br>
        这里多多复制几个，效果明显。
    </div>
    <div class="fixed"></div>

然后是 CSS。

        body {
            height:100%;
            overflow-y:auto;
            padding:0px;
            margin:0px;
        }
        .container {
            height:1800px;
            background:#CCC;
        }
        .fixed {
            position:fixed;
            top:50px;
            left:50px;
            background:red;
            height:50px;
            width:50px;
        }

还有对于 IE6 来说，加一个单独的样式

   <!--[if lte IE 6]>
        <style type="text/css">
            html {overflow-x:auto; overflow-y:hidden;}
            .fixed {
                position:absolute;
            }
        </style>
    <![endif]-->

原理就是对于 body 设置高度 100%，html 垂直方向上，超出高度给隐藏掉。然后里面的内容自己滚动，而 absolute 的相对于浏览器窗口的话，因为浏览器窗口就那么大，又不滚动，所以 absolute 看起来就 fixed 了。

但是这个有个问题，就是 所有设置了 absolute 和 relative 的元素，都会表现为 fixed 的，所以还是有副作用的。不过可以用来做遮罩层。

例子可以使用 IE6 浏览器访问。

毋庸置疑，CSS 中的 定位 对于从事重构或者前端的人来说，其占用非常重要的地位，但是对于初学者来说，却又有几点不是很清楚，这里就向大家介绍下 CSS  中的 定位 是如何工作的。

首先，我们来看下，什么是 定位。

当浏览器下载页面内容的时候，按下载的 HTML 页面内容的顺序（例如，html、body、head、div、p等），同时就开始渲染页面，而 定位 则就是决定这些元素如何显示，例如相对位置、或者重叠等情况。其实也就是本体相对于上级的定位，这里一共有4种方式来定义 定位，其分别是：static, relative, absolute 和 fixed。其意思也即是 静态、相对、绝对、固定。

Static 定位

即静态定位，也就是在制作 HTML 页面时，元素如何排列，则定位就如何排列。从上往下的顺序。没什么可解释的。

Relative 定位

即相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TOP、RIGHT、BOTTOM、LEFT进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
更多…