詳解css中position屬性

最近畫富瑞的界面，不少元素的定位都是個問題（在我沒有很詳細的知道position屬性以前）

後來上網查了下關於position的一些相關的屬性和用法，遂整理了一下

 

position：屬性：固定元素的定位類型。即元素脫離文檔的佈局流，在元素的任意位置顯示。

 

關於position的屬性值，有四種：

一、static：默認佈局（默認值）

二、fixed：固定定位，顧名思義是固定的意思，和absolute定位相似，可是比absolute更」定「！（不隨滾動條的滾動而滾動）

三、relative：相對定位，脫離文檔的佈局流，可是會在文檔的原先位置留下空白

四、absolute：絕對定位，脫離文檔的佈局流，在文檔中不會留下位置

 

下面簡答的說下這幾種定位方式：

1、static

              這個佈局爲默認的佈局，因此可說可不說，你們都比較熟悉了

              這就是意味元素沒有被定位，並且在文檔出如今它應該出現的位置上

             

2、fixed

              fixed定位的對象是以body爲定位的對象，簡而言之就是根據整個窗口（page）進行定位，經過（t,r,b,l）來進行定位，

              若是你的scroll設置爲false的話，這個定位就很吊了！，不少網站的廣告就是這個鬼

              其實感受網上都說得很麻煩，在個人理解，fixed就是把這個元素釘死在屏幕的這個點上，別的都無論（簡單粗暴）

             

3、absolute

              絕對定位，這是將對象抽離出正常的文檔流進行定位的一種方式，是將元素從整個文檔中飄出來，而元素自身的物理空間也會

              天然而然的消失，不像relative還會有原來的物理位置

              若是父級（無限）沒有設定position屬性，那麼當前的absolute則結合TRBL屬性以瀏覽器左上角爲原始點進行定位

              若是父級（無限）設定position屬性，那麼當前的absolute則結合TRBL屬性以父級（最近）的左上角爲原始點進行定位。

              當設定position: relative 則參照父級（最近）的內容區的左上角爲原始點結合TRBL屬性進行定位（或者說相對於被定位元素在父級內容區中的上一個元素進行偏移），無父級則以BODY的左上角爲原始點。相對定位是不能層疊的。在使用相對定位時，不管元素是否進行移動，元素依然佔據原來的空間。所以，移動元素會致使它覆蓋其餘框。

              通常來說，居中效果的話用Absolute就容易出錯，由於頁面一直是隨着分辨率的大小自動適應的，

              而Absolute則會以手機屏幕的左上角爲原始點，不會應爲分辨率的變化而變化位置。有時還須要依靠z-index來設定容器的上下關係，數值越大越在最上面，

              數值範圍是天然數。固然有一點要注意，父子關係是沒法用z-index來設定上下關係的，必定是子級在上父級在下。

              在絕對(absolute)定位對象以後的文本或對象在被定位對象被拖離正常文檔流以前會佔有它的天然空間。

              放置絕對(absolute)定位對象在可視區域以外會致使滾動條出現。而放置相對(relative)定位對象在可視區域以外，滾動條不會出現。

             

4、relative（感受我理解的也不是特別的透徹）

              從應用的角度來講，relative經常使用於包含有absolute元素的容器元素上。absolute元素默認以body作爲容器元素進行絕對定位。

              若是你想在頁面一個特定區域進行絕對定位，就能夠在absolute元素外包裹一層容器元素應用relative樣式。

              形象一點說，相對定位是很是自私的

              其最大特色是：本身經過定位跑開了還佔用着原來的位置，不會讓給他周圍的諸如文本流之類的對象。

              相對定位也比較獨立，作什麼事它本身說了算，要定位的時候，它是以本身自己所在位置偏移的（相對對象自己偏移）。

              其中relative須要理解最重要的一點就是相對於自身定位：也就是說

              relative是相對於本身來定位的，例如：#demo{position:relative;top:-50px;},這時#demo會在相對於它原來的位置上移50px。

             

最後說明下relative和absolute結合使用的一種狀況

先說明一句話：

              絕對定位元素的任何祖先元素沒有進行任何的「relative」或者「absolute」設置，那麼絕對定位的元素的參考物就是html

在強調一點：relative是相對於自身定位，absolute是相對父級元素定位的

 

舉個栗子（網上找的，感受說的灰常好）

（這裏放不了圖很很差，不過你們能夠腦補嘛）

上圖作爲一個實例來講明「relative」和「absolute」的關係，首先上圖中共有三個div放在body內，

並且他們三個div的關係是「div-1>div-2>div-3」,並且在div-3有這麼一個絕對定位：

.div-3 {
                position: absolute;
                left:0;
                top:0;
            }

 下面分幾個狀況來講明上圖的意思：

一、div-1與div-2都沒有設置「position:relative」，此時咱們的div-3絕對定位後就漂到了上圖中「div-3c」的位置上；

 

二、如今咱們在div-2元素中加設置一個「position: relative」，此時咱們的div-3絕對定位後就漂到了上圖中的「div-3a」的位置;

 

三、接下來把相對定位的設置換到div-1元素上，此時div-3絕對定位後就到了div-3b的位置。

 

花這麼多心思，我只想說明一點：若是一個元素絕對定位後，其參照物是以離自身最近元素是否設置了相對定位，

若是有設置將以離本身最近元素定位，若是沒有將往其祖先元素尋找相對定位元素，一直找到html爲止。