对于 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来设定上下关系的,一定是子级在上父级在下。
更多…