近来固定定位很火，页面没有个固定定位的东西你都不好意思。当然，有利于改善用户体验的都可以使用，具体可以到京东、新蛋的商品介绍页面体验一下。

固定定位本来很简单的一件事，但 IE6 面前就得费点心了。这个超过十年的古董级的浏览器，在国内还占据着巨大的份额，想不费心还不行。

1. 纯 CSS 方法：“假装”定位

说了是“假装”，就是用绝对定位模拟固定定位的效果。 
<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>IE6 Position Fixed</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

    html, body {
        height: 100%; /**/
    }

    * html {
        overflow: hidden; /**/
    }

    body {
        overflow: auto; /*滚动条放在body上*/
    }

    .fixed {
        position: fixed; /*向后兼容支持fixed的浏览器*/
        right: 10px;
        top: 100px;
        border: 1px solid red;
        background-color: #CCC;
        width: 200px;
        height: 300px;
    }

    * html .fixed {
        position: absolute; /*IE6*/
    }

&lt;/style&gt;



</head>

<body>

<div class="wrapper">

<p>All of your website content should be here.</p>

<script type="text/javascript">

for (var i = 0; i < 1000; i++) {

document.write('内容====================<br>');

}

</script>

</div>

<div class="fixed">

<p>This box is fixed.</p>

</div>

</body>

</html>

加注释（包括空的）的代码CSS规则是关键所在，原理是让 .fiexed 这个元素相对于 body 绝对定位，body 的高度被设置为 100% ，保持不变，所以 .fixed 元素的看起来就像固定定位一样。

不过也有点小问题：

  • “假装”固定定位的元素会覆盖浏览器滚动条（可以缩小浏览器窗口或者设置right:0试试），真正的固定定位位置相对于浏览器视口，不会出现这种情况；
  • 代码结构不够灵活；
  • 与 js 交互时可能会遇到其他问题。
参考链接：

2. Jonathan Snook 的经历

在 Jonathan Snook 早期个人网站的某一版本中，文章评论区域放在右侧并采用固定定位。经过一些列的尝试，最终采用 JavaScript 来解决固定定位问题。以下代码供参考： 
function window_onscroll()
{

var el = document.getElementById('postcomment');

if(el!=null)

{

if(typeof(document.media)=='string')

{// only do this for ie

var s;

// scrolling offset calculation via www.quirksmode.org

if (self.pageYOffset){

s = self.pageYOffset;

}else if (document.documentElement && document.documentElement.scrollTop) {

s = document.documentElement.scrollTop;

}else if (document.body) {

s = document.body.scrollTop;

}

el.style.top= s + 30;

}


if(typeof(window.print)=='function')
{// only do if not ie
  var x;
  // scrolling offset calculation via www.quirksmode.org
  if (self.pageXOffset){ 
    x = self.pageXOffset;
  }else if (document.documentElement &amp;&amp; document.documentElement.scrollTop){ 
    x = document.documentElement.scrollLeft; 
  }else if (document.body) { 
    x = document.body.scrollLeft;
  }
  el.style.left = (548 - x) + "px";
}



}

}

3. 延伸：CSS Sticky Footer - CSS固定底部

显示器分辨率越来越高，有时候页面内容比较少，一个大色块的footer悬在半空很不雅观，Sticky Footer 应运而生。 
<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer</title>
    <style type="text/css">
        /*
        Sticky Footer Solution
        by Steve Hatcher
        http://stever.ca
        http://www.cssstickyfooter.com
        */

    * { margin: 0; padding: 0; }

    html, body, #wrap { height: 100%; }
    body &gt; #wrap {
        height:auto;
        min-height: 100%; /* IE6 min-height hack */
    }

    #main {
        overflow: auto;
        padding-bottom: 150px; /* 必须和footer高度一样 */
    }

    #footer {
        position: relative;
        margin-top: -150px; /* footer高度负值 */
        height: 150px;
        clear: both;
        background-color: #1a1a1a;
        color: #ccc;
    }

    .cf:before,.cf:after {
        content: " ";
        display: table;
    }

    .cf:after {
        clear: both;
    }

    .cf {
        *zoom:1;
    }
&lt;/style&gt;



</head>

<body>


<div id="wrap">

<div id="main" class="cf">


&lt;/div&gt;



</div>


<div id="footer">

</div>

</body>

</html>

代码结构如上，把 footer 以外的东西全部丢到#main里面去就行，兼容的浏览器多得数不过来。

参考链接：