css定位是css中比較基礎的一部分，前端必須要掌握。本文重點是position的屬性和sticky。
css定位即允許元素可以出現在相對正常位置外的其它位置，實現對元素位置控制的效果。
css定位基本分為三種定位：普通文件流、浮動和絕對定位。
普通文件流即按照html的定義順序完成排布，塊級元素就從上往下排列，行內元素就從左到右依次排序。
浮動即給元素設定float屬性，設定float的屬性會脫離文件流，則該元素不會占用文件流中的空間，其它在文件流中的元素排布就會無視該元素，脫離文件流的元素也不能撐起父元素的高度。
但float脫離文件流又不太完全，附近元素附件元素內的文字還是會為浮動元素讓出位置，例：
普通文件流中有兩個塊級元素，塊1和塊2，我們設定塊1為浮動元素：
結果發現塊1脫離文件流，導致塊1和塊2合併到一起，但塊2的文字部分還是為塊1讓出了位置，圍繞在塊1周邊
static是position預設值，即表示元素是使用普通的文件流進行排布
relative表示相對定位，該屬性與absolute和fixed使用上有相似之處，都是相對某個基點定位，所以我們搞清楚這三個屬性對應的基點會很容易區分。
relative相對布局的物件是在普通文件流中(即position: static)中的位置進行偏移，即基點是元素的預設位置，並配合left、top、right、bottom屬性進行位置設定。
relative布局的元素並未脫離文件流，其它普通流元素在排布時會當它是普通元素，且會認為它還在原來的位置上。
absolute表示絕對定位，相對于父元素進行定位，即基點為父元素。
且absolute的基點不能是static定位元素，否則基點就會變成網頁根元素html。
定義absolute屬性的元素會在文件流中完全刪除。
看一下示例：
例子中容器container包含三個塊，將塊2設定為absolute定位的元素後，可以看到塊2並沒有相對父元素container作為基點，而是使用根作為了基點，就是因為父元素container的position屬性為預設static。
那麼我們給父元素設定一下position屬性：
可以看到塊2選擇父元素container作為基點進行定位。
fixed屬性表示元素相對視窗定位，即基點為視窗，且fixed屬性設定的元素也會脫離文件流。
fixed屬性設定的元素不會隨著頁面滾動條的滾動而變化，像是被固定在視窗上，我們經常見到返回頂部按鈕等都是使用fixed定位的。
fixed的使用方法與absolute和relative相同，都是通過left、right、top、bottom進行定位。
sticky屬性是粘性定位，是乙個很有意思的屬性，該屬性定義的元素的基點會發生變化，粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之後為固定定位。
看乙個簡單的例子：
例子中外層容器container為乙個固定寬高的滾動塊級元素，其中包含了三個子元素塊，塊1、塊2和塊3(綠色塊被覆蓋)。其中只有塊2是sticky定位的元素，並且top為0：
.block2塊2就是按照普通流的排布方式進行排布，此時塊2的基點為本身位置。當父級元素container滾動條拉到最下時，可以看到塊2並沒有被拉到不可見區域，且塊2覆蓋了塊3，此時塊2的基點變成了父級元素container。
sticky屬性生效的規則是必須配置位置偏移，即配置left、right、top、bottom四個閾值其中之一才可以生效，否則等同於relative。
具體規則是：
在祖先的滾動元素未滾動到閾值之前，sticky屬性元素根據正常文件流進行定位，並且left、right、top、bottom四個屬性實際是未生效的，此時基點就是當前元素在文件流中的位置，與relative基點一樣。
當滾動的祖先元素滾動到sticky元素設定的閾值之後，sticky變成類似固定定位，且基點變成了滾動祖先元素的位置，就出現了該元素會固定在祖先元素上的現象。並且無論基點是什麼都不會影響其它元素的位置，即sticky元素並未脫離文件流。
乙個sticky元素會「固定」在離它最近的乙個擁有「滾動機制」的祖先上（當該祖先的overflow 是 hidden, scroll, auto, 或 overlay時），即便這個祖先不是最近的真實可滾動祖先。也就是說sticky元素生效的條件是：最近的可以滾動的祖先元素，滾動到元素設定的閾值(由left、right、top、bottom四個閾值至少乙個組成)，才能觸發效果。
從這裡也就提到了網上經常提到關於sticky的問題，為什麼設定的sticky元素未生效，我們看乙個例子：
(還是之前那幾個塊，醜是醜了點，勝在簡單)
還是之前那個container容器，其中塊2是sticky布局的元素，當container元素的滾動條向下拉打到塊2設定的閾值(top: 0)時，塊2會固定在元素container上。
但當我們將視窗高度縮小，滑動視窗的滾動條試圖滿足塊2的閾值時：
發現塊2並沒有像fixed布局一樣固定在視窗上，那就是因為sticky元素的基點是距離最近的滾動元素，在例子中就是塊2的父元素container，即使父元素沒有實際的滾動高度，基點也是container，這樣就出現了"不生效"的情況。
所以sticky的元素不一定會固定在視窗上，如果想要實現類似fixed一樣固定在視窗上的效果，那麼最簡單就是需要sticky元素的最近滾動祖先元素是根節點，即設定所有sticky的祖先元素都是不可滾動元素。
沉默三分鐘
網上見此真情之文，藉以自表 原文 http www.hecaitou.net p 3018 沉默三分鐘是心祭。那麼多年了，國旗終於為平民而降。那麼多天了，全民哀悼終於實現。與此同時，火炬停止傳遞，因為這不是乙個歡慶的時刻。很多年後回顧2008年，我 也許寧可它從日曆中消失。還沒有哪一年和今年一樣，才...
三分鐘帶您搞懂建造者模式
建造者模式 builder 將乙個複雜物件的構建與它的表示分離，使得同樣的構建過程可以建立不同的表示。建造者模式有兩重含義 1 將乙個物件的使用和建立過程分離，這樣使用者在使用這個物件的時候，就不需要關心該物件的具體建立過程和細節。2 將物件建立的步驟抽象出來，再建立其他建立步驟相同的物件時，只需要...
《每天感恩三分鐘》
每天感恩三分鐘 有位104歲的老太太耳聰目明，老而彌堅。有人向她請教長壽秘訣，老太太笑了 我有一帖靈丹妙藥，那就是每天化三分鐘時間感恩。她說，化一分鐘感恩父母 丈夫 兒女 鄰居和陌生人 一分鐘感恩大自然給予的種種關懷和體貼 一分鐘感恩每乙個祥和 溫暖和快樂的日子 感恩使她心裡永遠流淌著幸福的泉水，有...