css的postion屬性

首先,來段代碼進行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

  1. postion屬性有四個值,分別是static,absolute, relative, fixed。其中static和relative兩個屬性值是跟文檔流有關,其餘兩個跟文檔流無關。那麼什麼是叫文檔流呢?個人理解是文檔流就是對文檔的讀入和輸出順序,例如上述所貼的代碼,box類下有三個div,若是咱們忽視它們的css樣式,那麼它們在瀏覽器的展現方式是從上到下是R,G,B,而且每個佔用一層。web

  2. static,默認的position值,若是對元素進行TLBR操做,是不起任何做用的(怪不得剛開始沒設置position的值,根本沒發生偏移,囧)。瀏覽器

  3. relative,相對定位。其實這裏的相對定位,是相對它自己在正常文檔流的位置的偏移,儘管偏移了,它本來在正常文檔流的位置還在保存着,例如上例的結果,你在瀏覽器中能夠看到右上角的L的位置還存在,儘管L已經飄走了。因此儘管L進行了相對定位,可是它的存在仍是對G和B有影響,並不抽離出文檔流。app

  4. absolute,絕對定位。這裏的絕對定位,是指它自己被抽離出文檔流,即一旦它的positive設置爲absolute,它原先在文檔流中所佔的位置就被其餘的元素所佔用。那麼對它進行TLBR操做則是怎麼定位呢?它會首先尋找距離它最近的父元素,而且該父元素的position屬性值不爲static,若是查找不到,ok,這是它就會相對body進行TLBR操做。post

  5. fixed,該屬性值相對於瀏覽器窗口,所以拖動滾動條不影響它在窗口中的位置。學習

  6. 之因此研究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,篡改題意這種作法不可取

相關文章
相關標籤/搜索