css absolute與relative

用絕對定位和相對定位的時候有時候效果總跟本身預想的不同，在此作個小記錄。

首先建兩個div一個爲父一個爲子

<div class="test1">

<div class="test2"></div>

</div>

.test1{ height: 300px; width: 300px; background-color: #409eff; }

.test2{

height: 50px; width: 50px; background-color: brown; margin-top: 50px; margin-left: 50px;

}

效果圖：

這裏發現test2設置的margin-top使父元素向下偏移了，這是由於若是父子元素上邊重合就會出現這種狀況，只須要在父元素頂上加個padding-top或者border或者其餘的別讓他倆重合就行，在test1的樣式里加 padding-top: 1px; box-sizing: border-box;其中box-sizing: border-box;是爲了將padding增長的尺寸限制住，平時設置padding時若是已經規定寬高那麼padding會使寬高加出來，用這個能夠避免，很方便。改好以後效果圖跟咱們想的同樣了：

爲了方便體現給父元素也加上上左50的外邊距

而後先來給子元素加絕對定位.test2{position: absolute;},發現沒有變化，由於top, left, right, bottom不設置一個不會激活absolute。

而後

.test1{ height: 300px;  
       width: 300px;  
      margin-top: 50px; margin-left: 50px; 
      background-color: #409eff;  
    padding-top: 1px;  box-sizing: border-box; 
} 
 .test2{ height: 50px;
	   width: 50px;  background-color: brown;
       /* margin-top: 50px; margin-left: 50px; */ 
     position: absolute;  top:0px; 
 }複製代碼

效果：

當給top設爲0子元素並無在父元素內，這是由於絕對定位使子元素脫離了文檔流而且它的父元素沒有加定位，這時他會找上一級有定位的元素來作參照，若是沒有就以頁面爲參照了，能夠看到咱們將test2的margin註釋了，當咱們打開註釋發現margin依然起做用，通過個人測試發現這時的margin能夠記爲若是該方向上設置了好比top那麼這時的margin-top能夠理解爲在top完成後的位置上進行了一次margin-top,而該方向若是沒有top這時的margin-top與沒有定位時效果相同。固然實際使用用了絕對定位後也不必再用margin。注意絕對定位的四個方向只會以有定位的父元素祖父元素做參考。

relative是以自身爲參照物，並且雖然彷彿脫離了文檔流但原先的地方仍然佔位，看看代碼：

<div class="test1">

<div class="test2"></div>

<div class="test3"></div>

</div>

.test1{ height: 300px; width: 300px; margin-top: 50px; margin-left: 50px; background-color: #409eff; padding-top: 1px; box-sizing: border-box; }

.test2{ height: 30px; width: 50px; background-color: brown; position: relative; top:50px; } .test3{ height: 150px; width: 50px; background-color: chartreuse; }

這兩個定位常常一塊使用，必定要細心，先放外層再放內層，若是有跟本身預期不同的顯示先要找到哪一個定位出了問題。之後再踩到這兩個定位的坑再來補充。