關於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放著我們下次一一把每一個意思弄懂！