Position屬性四個取值用法和區別
Position屬性四個取值用法和區別
在初學css的過程中常常會碰到設置定位的問題，大多數初學者都是大概明白，如果不好好弄清楚將會給以後的開發帶來困難，經過本小菜對其他文章的瀏覽，自我總結如下：
目錄
·Position屬性有以下四個取值：
static:靜態定位，是position屬性的默認值，表示無論怎麼設置top、bottom、right、left屬性元素的位置（與外部位置）都不會發生改變。
relative：相對定位，表示用top、bottom、right、left屬性可以設置元素相對與其相對於初始位置的相對位置。
absolute：絕對定位，表示用top、bottom、right、left屬性可以設置元素相對於其父元素（除了設置了static的父元素以外）左上角的位置，如果父元素設置了static，子元素會繼續追溯到祖輩元素一直到body。
fixed：絕對定位，相對於瀏覽器窗口進行定位，同樣是使用top、bottom、right、left。
四種取值中，除了static之外，其他屬性都可通過z-index進行層次分級
-static
static（靜態定位）是默認值，元素出現在正常的流中。不會受到top, bottom, left, right影響。
-relative
定位爲relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。
注：元素脫離正常的文本流意思是外觀位置發生了改變，即是實際頁面的可以看到的變化，文本流的位置依然存在指的是默認的位置（設置之前的位置）還在，相當於「雖然設置了位置偏移，但元素的靈魂還在原地~」
他是默認參照父級的原始點爲原始點定位元素，無父級則以文本流的順序在上一個元素的底部爲原始點定位元素位置，並配合top、bottom、right、left設置偏移確定元素定位：
一般情況下以父級的左上角爲原定，在沒有父級的時候，他是參照瀏覽器左上角，如果在沒有父級元素的情況下，存在文本，則以文本的底部爲原始點進行定位並將文字斷開。
如果父級沒有設定position屬性，仍舊以父級的左上角爲原點進行定位。
- 如果父級設定position屬性，不管是取哪個值，都以父級的左上角爲原點進行定位。如果父級有Padding屬性，那麼就以內容區域的左上角爲原點，進行定位。
以上三點可以總結出，無論父級存在不存在，無論有沒有TRBL，均是以父級的左上角進行定位，但是父級的Padding屬性會對其影響。
-absolute
定位爲absolute的層脫離正常文本流，但與relative的區別是其在正常流中的位置不再存在。（這裏是與relative的第一個不同點）
注：跟relative一樣，這裏也是實際上可以看到的佈局發生了變化，跟relative不同的是，此時它的「靈魂」不在原地，也不在新的位置，而是不復存在了。
在這裏要注意別跟Fixed值混淆，absolute並不是永遠根據瀏覽器窗口進行定位的，這是Fixed的特性，absolute要更加複雜：
一般情況下以父級的左上角定位，在沒有父級的時候，他是參照瀏覽器左上角
（這與relative完全一致）；
如果在沒有父級元素的情況下，存在文本，則以它前面的最後一個文字的右上角爲原點進行定位但是不斷開文字，覆蓋於上方。（這裏是與relative的第二個不同點）；如果父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角爲原始點進行定位，位置將由偏移設置(top、bottom、left、right)決定；（這與relative完全一致）
- 如果父級設定position屬性(無論是absolute還是relative)，則以父級的左上角爲原點進行定位，位置由偏移設置(top、bottom、left、right)決定；（這與relative完全一致）。
即使父級有Padding屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角爲原點進行定位，父級的padding對其根 本沒有影響。 （這裏是與relative的第三個不同點）
-fixed
其實fixed和absolute是一樣的，唯一的區別在於：absolute元素是根據最近的定位上下文確定位置，而fixed永遠根據瀏覽器確定位置。
fixed元素與文檔流無關，可重疊也不回影響其他元素佈局，只一直根據瀏覽器左上角定位。
-relative和absolute的區別
| 特徵 | relative | absolute |
|---|---|---|
| 在正常流中的位置 | 存在 | 不存在 |
| 無父元素但存在文本 | 以文字底部爲原點並會斷開文字 | 以最後一個文字右上角爲原點並不斷開文字 |
| 父元素的padding屬性對元素位置有無影響 | 有影響 | 無影響 |
-z-index屬性
z-index，又稱爲對象的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊，如果兩個對象的此屬性具有同樣的值，那麼將依據它們在HTML文檔中流的順序層疊，寫在後面的將會覆蓋前面的。需要注意的是，父子關係是無法用z-index來設定上下關係 的，一定是子級在上父級在下。
- 總的來說就是：
1.先看元素的父子關係，子級在上父級在下；
2.再看元素的z-index定義的整數值大小，數值大在上，數值小在下；
3.如果是同一級元素並且z-index值相同，就看元素在html文檔中流的順序，先寫的會被後寫的覆蓋。
注：使用static 定位或無position定位的元素z-index屬性是無效的。