"小白，你最近看css的時候碰到position屬性了麼？"
「碰到了，通過position可以改變容器的定位，我記得官方描述是這樣的：這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。」
「恩，不錯，今天咱說一下position裡面的fixed型別吧，這個屬性值是讓容器基於瀏覽器視窗的絕對定位，在我們平時的製作中經常會碰到。」
老朱接著說：「給乙個容器設定position為fixed以後，可以通過left、right、bottom、top進行四個方向的距離定位。現在我們在頁面中寫乙個fixed容器，看一下**片段。」
「你看，這裡我在body裡面加了乙個標識為foot的div，然後他的css裡面把position設定成了fixed，並且bottom(距離底部)為0，這裡的bottom是基於瀏覽器視窗的距離進行計算的，foot的寬和高也進行了設定。現在我們看一下效果！」
「你可以看到，拖動滾動條往下滾動網頁的時候，foot的位置並不會隨著滾動條的滾動發生改變，它就像是漂浮在那裡一樣。這裡的foot是乙個div容器，所以它的內部我們還可以放任何你希望布局的內容，比如放乙個，或者其他的容器。」
「這裡插入的要想跟foot容器寬度一致，根據我們之前說過的對css的操作，把的寬度(width)設定為100%，就會自動與父容器寬度一致了。」
小白突然想到了很多手機html5頁面下方都有導航條，問道：「很多手機的html5頁面裡面下方的導航條不會隨著頁面的滾動而滾動，這種導航條是不是也通過fixed來設定的。」
「是的，跟這裡的foot一樣，我們只需要把導航條的父容器設定為fixed就可以了。有個需要注意的地方是導航條會根據手機螢幕的解析度自動占用螢幕寬度，所以我們在給foot設定css樣式的時候就不能設定寬度了。」
小白問道：「那應該怎麼設定呢？」
老朱說：「你忘了我們剛說了fiex可以通過top、right、bottom、left設定四個方向的距離麼？如果要讓乙個fixed容器左右靠邊，我們只需要left為0，right為0，它就會自動匹配視窗的寬度。現在我們把之前的foot容器改一下。」
「通過設定bottom、left、right可以讓foot靠近底部並且保持與視窗寬度一致。然後我們在foot裡面放了乙個ul-li容器，讓li容器向左浮動並且寬度為父容器的25%，布局就會變成這樣。」
「網頁上的底部導航通常都會放入透明的png，現在我們插入png圖，再進行一下css的調整。」
「網頁底部導航條，上面還會牽扯到滑鼠事件，焦點樣式變化，這些知識我們隨後也會一一展開討論，今天先這樣吧！你先練習練習今天說的這些內容，然後試著做乙個居中漂浮的層，看看能不能做出來！」
想學h5的朋友可以關注老爐，您的關注是我持續更新《小白html5成長之路》的動力！
小白H5成長之路3 做H5之前我該準備什麼工具？
早晨上班時候，小白來的很早，他已經迫不及待的開始學習html5了，老朱剛來他就湊了過來，朱哥，我應該從哪兒開始學？你不用著急，先把做html5的工具準備好吧！然後安裝谷歌chrome瀏覽器 小白 為何要安裝chrome瀏覽器呢？ie不能用麼？老朱跟小白說 知道乙個網頁的結構吧？不太清楚，我只知道一般...
小白H5成長之路5 CSS需要全學麼？
小白，css樣式看的怎麼樣了？第二天老朱找到小白問道。小白鬱悶的說道 過了一遍，不過css樣式太多了，看的有點暈。嗯，過一遍就可以了，我來跟你說一下css怎麼用吧！你還是開啟昨天的文件。檢視原始碼 開啟了！好的！css樣式最常見的就是控制乙個容器 div p span li等這些都是容器 的文字樣式...
《小白H5成長之路15》正確認識網頁中的文字框
小白，你知道文字框麼？知道，就是網頁裡面輸入文字的地方！哦，那你知道表單麼？不知道，表單是什麼啊？文字框就是乙個表單元素，在html語言裡面表單主要用來收集使用者輸入。比如文字框 單選框 核取方塊等等。其他的表單你目前學了也用不到，文字框是表單中最重要的乙個，今天咱聊一聊文字框吧，文字框以後會成為你...