关于position: fixed学习，顶部固定导航

        关于html的知识学习，以前可能大家通用的是：position：relative，position：absolute；那么我前面三天的一个页面用到了position：fixed相对浏览器元素进行定位（相对于窗口的固定定位），因为现在非常流行顶部浮起导航效果和底部信息表浮起等效果。并且很多网站还有特别的地方例如拉到一个位子浮出一个DIV或者拉到一定程度弹出底部预约信息表格填写等！

        position:relative    生成相对定位的元素，相对于其正常位置进行定位。

        position:absolute 相对父级元素绝对定位。

以上都有点偏离今天的主题了，今天我们就来好好学习position:fixed,

例子：

样式：

    .top{position: fixed;top: 0px;width: 100%;background-color: #F8EA67;height:60px;}
    .top .logo{float:left;margin-left:180px;height:60px;}
    .top .nav {float: right;width:60%;position: relative;}
    .top .nav ul{float: left;height:60px;width: 675px;}
    .top .nav ul li{float: left;width: 135px;padding: 20px 0px 0px 0px;list-style: none;}
    .top .nav ul li a{text-decoration: none;font-weight:bold;color: #CC6500;}

html：

<div class="top">
        <div class="logo"><img src="./images/logo.jpg"></div>
        <div class="nav">
            <ul>
                <li><a href="">　　　首页</a></li>
                <li><a href="">AAAAAAAAA</a></li>
                <li><a href="">BBBBBBBB</a></li>
                <li><a href="">CCCCCCC</a></li>
                <li><a href="">DDDDDDD</a></li>
            </ul>
        </div>
</div>

顶部导航就这样完成了。

当大家感觉非常逗比的时候会笑话我，但是我觉得学习这条路上本来就是被大神门拿来笑话的。。。

那么问题来了，这个支持IE6？这也就是我们以前学习不到的地方时代在进步，CSS也变得越来越“动态化”。

下次我们一起来研究一个写好的手机端的上下固定导航：

当我走向这条道路是因为我一直在做，却没有去实际理解为什么，这样做有什么意义，而是一味去把这些用到工作中，有一天别人问我这个有什么区别我却说不出来，写给那些会而说不出口的程序员。在这里那些会而不会说或者并没有实际理解的前端朋友！

请position: fixed记住工作于 IE7（strict 模式），想深入就开启strict 模式深入下去吧！错，今天我们还有一个很重要的东西要学习，IE6怎么办呢：

<script type="text/javascript">
            function _fixBackground(){
                var body = document.body;
                var BLANK_GIF;
                if (body.currentStyle.backgroundAttachment != "fixed") {
                    if (body.currentStyle.backgroundImage == "none") {
                        body.runtimeStyle.backgroundImage = "url("+BLANK_GIF+")"; // dummy
                        body.runtimeStyle.backgroundAttachment = "fixed";
                    }
                }
            }
            window.onload = function(){
                _fixBackground();
                }
        </script>
        <style type="text/css">
            .fixed{
            position: absolute;
           bottom: auto;
           clear: both;
          width:expression(document.getElementById('iefixed').clientWidth);
         left:expression(document.getElementById('iefixed').offsetLeft);
         top:expression(eval(document.compatMode &&
        document.compatMode=='CSS1Compat') ?
        documentElement.scrollTop
        +(documentElement.clientHeight-this.clientHeight)
        : document.body.scrollTop
        +(document.body.clientHeight-this.clientHeight));
       }

</style>

暂时先把JS放着我们下次一一把每一个意思弄懂！