層模型
css中元素的層次模型主要是由position這個屬性來決定的。css
position屬性：position的意思是定位，一樣這個屬性的做用就是給元素施加定位。它一共有四個值，分別是static、absolute、relative、fixed。瀏覽器
static
• static是默認的屬性，當咱們沒有寫position屬性的時候，元素默認的定位就是static定位。app
absolute
• absolute是絕對定位的意思，它會使元素脫離原本的位置再進行定位，它會使元素像立交橋同樣出現空間上的分層，當元素脫離原來的位置以後，其餘的元素就會看不到這個元素。同時，absolute也能夠觸發bfc。佈局
• 同時，當咱們改變定位以後，這個元素就有四個屬性可使用了，分別是left、right、top、bottom。這四個屬性分別能夠設置當前元素距離左邊、右邊、上邊和下邊的距離爲多少，可是四個屬性不多一塊兒出現，通常都是兩兩一對出現，其中left和top是一對，right和bottom是一對。學習
這個div就會脫離原來的位置，而後距離瀏覽器上邊框和左邊框分別100px的距離。spa
• 最後一點，absolute的參照物是距離它最近的有定位（除了static）的父級，當每個父級都沒有定位的時候，元素會相對於瀏覽器邊框進行定位。3d
relative
• relative是相對定位的意思，它會讓元素保留原來的位置再進行定位，後面的元素能夠看到它原本的位置。blog
• 當position改爲relative以後，left、top、right、bottom進行的定位就會變成相對於自身的位置進行移動了。開發
• relative的參照物是元素自身。it
• 當咱們僅僅給元素設置position:relative;並無設置left、right、top、bottom屬性的時候，元素的定位是沒有發生任何改變的，由於這個特性，通常在開發中，relative都是用做設置參照物的，一個absolute元素要相對於那個元素進行移動，就給那個元素設置relative的定位就能夠了。
咱們經過例子來看一下absolute和relative的區別。
咱們如今有這樣一個結構：
<div class=」wrapper」>
<div class=」box」>
<div class=」content」></div>
</div>
</div>
這個時候時候咱們在瀏覽器中看到的樣式是這個樣子的：
如今咱們給content加上定位的樣式。
這個時候瀏覽器中的樣式就會發生改變，content那個黃色的小方塊會跑到橘黃色的方塊外面：
這是由於，當咱們給content設置position:absolute;以後，瀏覽器在渲染的時候，會先向上找到box這個div，看看這個div有沒有定位，由於沒有，因此繼續向上找wrapper，依然沒有，再向上找body，仍是沒有，因此最後就是相對於瀏覽器邊框定位，這個時候content的left屬性就是相對於瀏覽器邊框左邊有50px的距離的意思。
如今咱們把content的定位換成relative，瀏覽器中的結果變成了這個樣子：
原本content黃色小方塊在黑色方塊的左上角，而後relative相對與自身的位置進行定位，這個時候的left屬性的意思就是相對於原本在黑色左上角的那個位置向右移動了50px的距離，也就是如今這個黃色小方塊所在的位置。
所以，總結一下absolute和relative的特色以下：
• absolute：
1.脫離原來位置進行定位
2.相對於最近的有定位的父級進行定位，若是沒有那麼相對於瀏覽器邊框定位。
• relative：
1.保留原來位置定位
2.相對於最近的有定位的父級進行定位
通常被用來設置參照物
fixed
fixed定位是相對於視口的定位，咱們在網頁上都見過左右兩邊不隨着滾輪滾動而改變位置的廣告欄，這種廣告欄就是用fixed定位的。
<div class=」fixed」></div>
這段代碼中，div.fixed這個元素就是一直在視口的右邊，不隨着咱們滾動而改變相對於視口的位置。
最後提一點
• 值得注意的是，當咱們寫這樣一段代碼的時候：
<div class=」demo」></div>
咱們把absolute換成relative以後，會發現整個div會向上移動一小段距離，這是爲何呢？
答案其實就在上一篇的文章裏，margin合併問題——body標籤自己有8px的margin，而四個方向的margin天然包括了margin-bottom，咱們爲div.demo設置了margin-top，就會致使margin合併的問題發生，當position是relative的時候，並無觸發bfc，因此中間的距離會取兩者的最大值，也就是200px，當position是absolute的時候，由於觸發了bfc效果，從而消除掉margin合併的bug，所以中間的距離是200+8=208px。
一點小應用
1.咱們學習了定位以後，就能夠實現前面文章提到的元素水平垂直居中的效果了喲~
只要咱們給一個div加上下面的樣式：
這個div就會在有定位的父級裏面是水平垂直居中了喲~
2.咱們還能夠實現多欄佈局了！
首先咱們寫三個div，分別起類名爲left、mid、right，而後分別加上以下的樣式：
<div class=」left」></div>
<div class=」right」></div>
<div class=」mid」></div>
咱們首先固定左側和右側的兩個div，而後讓中間的div分別給左側和右側留出一個固定寬度的margin以後，讓自身自適應屏幕的大小便可實現三欄佈局效果。
• 要注意的是，div.mid記得寫在後面，若是寫在最前面的話，由於div是block塊級元素會獨佔一行，這樣就會把左側和右側的div給擠到下一行了。固然咱們給.left和.right都加上top:0px;以後，這個問題也就不用考慮了。
此次的層模型總結就到這裏了，但願對你們有幫助喲~