首先,來段代碼進行css的postion屬性的學習之路。css
<html> <head> <title> position </title> <style> body { margin: 0px; padding: 0px; color: white; text-align: right; } .box { width: 50px; border: dotted yellow; } .square { width: 100px; height: 100px; } .r { background-color: red; } .g { background-color: green; } .b { background-color: blue; } #l { float: left; } #r { float: right; } #abs { position: absolute; top: 150px; left: 50px; } #rel { position: relative; top: 150px; left: -50px; } </style> </head> <body> <div class="box" id="l"> <div class="r" class="square" id="abs">R</div> <div class="g" class="square">G</div> <div class="b" class="square">B</div> </div> <div class="box" id="r"> <div class="r" class="square" id="rel">R</div> <div class="g" class="square">G</div> <div class="b" class="square">B</div> </div> </body> </html>
其實這段代碼寫的不是很規範,例如document,meta等,咱們就先忽視這個問題。。。html
postion屬性有四個值,分別是static,absolute, relative, fixed。其中static和relative兩個屬性值是跟文檔流有關,其餘兩個跟文檔流無關。那麼什麼是叫文檔流呢?個人理解是文檔流就是對文檔的讀入和輸出順序,例如上述所貼的代碼,box類下有三個div,若是咱們忽視它們的css樣式,那麼它們在瀏覽器的展現方式是從上到下是R,G,B,而且每個佔用一層。web
static,默認的position值,若是對元素進行TLBR操做,是不起任何做用的(怪不得剛開始沒設置position的值,根本沒發生偏移,囧)。瀏覽器
relative,相對定位。其實這裏的相對定位,是相對它自己在正常文檔流的位置的偏移,儘管偏移了,它本來在正常文檔流的位置還在保存着,例如上例的結果,你在瀏覽器中能夠看到右上角的L的位置還存在,儘管L已經飄走了。因此儘管L進行了相對定位,可是它的存在仍是對G和B有影響,並不抽離出文檔流。app
absolute,絕對定位。這裏的絕對定位,是指它自己被抽離出文檔流,即一旦它的positive設置爲absolute,它原先在文檔流中所佔的位置就被其餘的元素所佔用。那麼對它進行TLBR操做則是怎麼定位呢?它會首先尋找距離它最近的父元素,而且該父元素的position屬性值不爲static,若是查找不到,ok,這是它就會相對body進行TLBR操做。post
fixed,該屬性值相對於瀏覽器窗口,所以拖動滾動條不影響它在窗口中的位置。學習
之因此研究position是由於看到了阿里2014的一個線上筆試題,以下:測試
有兩個盒子A和B,其中B在A盒子內,如今要求實現B在A中水平方向和垂直方向均居中。code
.A { position: relative; width: 500px; height: 500px; background-color: green;} .B { position: absolute; max-width: 300px; max-height: 300px; background-color: blue;}
這裏設定A爲寬度和高度必定的relative定位,B相對A進行TLBR操做使其相對A居中。htm
剛開始拿到這題時,我把它想的巨簡單,既然B的父元素A相對定位,那麼把B相對A的top進行50%,left進行50%偏移,不就居中了麼?而後很happy的測試一下,果真居中,好吧,其實只是B的左上角座標居中,當B中有content、border、padding中任何一項內容時,就不知足要求了,仍是繼續思考怎麼解決。
接下來想到一種比較暴力的方法,由於題中並無要求用的是CSS解決這個問題,因此想到了用JS實現。首先計算出A的寬度,固然這個寬度是padding+border+content。先把代碼貼上,明天繼續分析。
<script> var b = document.getElementsByClassName('B')[0]; var a = document.getElementsByClassName('A')[0]; var width = b.offsetWidth; var height = b.offsetHeight; var w = a.offsetWidth; var h = a.offsetHeight; b.style.marginLeft = (w - width) / 2 + 'px'; b.style.marginTop = (h - height) / 2 + 'px'; </script>
後來在網上看到有種解法,把B的position從新設置爲非absolute,而後添加A的css樣式
.A { display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;}
這樣也能解決問題,但是我以爲既然題目要求A是relative,B是absolute,篡改題意這種作法不可取