前面我們寫了一個網(wǎng)頁，當然，我們都知道這是一個很簡單很基礎(chǔ)的網(wǎng)頁。只是我們心照不宣的照樣拿他出去炫耀罷了，咳咳，這個秘密誰也不許往外說，否則莫怪為師……
串詞了，沒事，你就當沒看見。那么大家看前邊的布局的時候有沒有覺得很單調(diào)乏味呢？想橫排，用浮動，浮動之后要清除；想居中，兩邊補，外補自動有寬度。就這點東西吧，翻來覆去還是這點東西。很無聊的，也很死板的，僅憑這樣的三腳貓功夫肯定是搞不出來靈動灑脫的網(wǎng)頁來的。
當然了，要是就是某些網(wǎng)游的官網(wǎng)，堅持十年前的套路，十年了，那些結(jié)構(gòu)都沒變過，換換背景就是另一家游戲……那你現(xiàn)在的水平應(yīng)該可以應(yīng)付了的說。我在說什么你懂的，反正我是不懂的。
得，咱們閑言少敘，書歸正文，啪，響木這么一拍呀，別的咱不夸……
那個這一節(jié)開始我們講一些元素的定位方式，其實吧，他們說什么絕對定位相對定位的我也分不清，總覺得有點故弄玄虛。但是我知道每一種定位方式是怎么回事，什么時候該怎么用。反正到目前為止一只狗用一直夠用，除了沒法裝[嗶~]。
元素定位方式的屬性是：position，他的默認值是static，這個了解下就好，我又是現(xiàn)查的，因為并不常用啊，默認值一般都省略不寫了。
現(xiàn)在我們來認識幾個特殊的定位方式：
fixed，這個應(yīng)該是最受新人歡迎的定位方式，好理解，效果明顯，也好玩。他是相對于瀏覽器的定位。
就是你隨便怎么上下滾動頁面，這家伙就鐵了心的不動彈。因為他是相對于瀏覽器的窗口的，瀏覽器窗口沒移動和變化，那其他的事就跟他沒啥關(guān)系，這就好像十字路口的交警，任你車來車往，他就站在那里堅守崗位。
然后我們舉個簡單的例子說明一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed 定位實例</title>
<style>
#miao {
width: 130px;
height: 30px;
position: fixed;;
left: 30px;
bottom: 30px;
background: #C00;
line-height: 30px;
color: #FFF;
text-align: center;
}
</style>
</head>
<body>
<p>請將本行重復一萬次，當然你要是和我一樣懶，復制到超過一頁就好，適當多點可以方便查看效果，我就不復制那么多了，本章的長短與稿費無關(guān)……其實根本沒有稿費好嗎</p>
<div id="miao">我就在這不動了！</div>
</body>
</html>試試效果吧，你怎么滾動那個紅色的元素總在左下角，不會發(fā)生移動，如下圖：
那么上面的代碼大部分都很容易理解了，我來解釋一下其中的 left 和 bottom。我們說：position: fixed;; 是說定位方式，相對于瀏覽器窗口定位。但是我們說他的位置了沒有？沒有啊！
這 left 和 bottom 就是說明他的位置的，我解釋給你聽?。?left 就是說元素的左邊緣和瀏覽器的左邊緣之間的距離；同理 bottom 就是說元素的下邊緣和瀏覽器的下邊緣之間的距離。
然后聰明的你就可以舉一反三地說出 right 和 top 的意思了。嗯，這四個東西下節(jié)課還要用哦~
留個作業(yè)，除了那種懸浮的“在線客服”或者廣告之類的東西以外，大家找找 fixed 定位還在哪里被用出了高大上的效果？
本章代碼下載：本章代碼
本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：
alay9999@163.com （劉源）
為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內(nèi)容以主站為準：
未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多