position的兩個屬性absolute和relative的使用
*absolute 絕對的* *relative 相對的*
1.不使用position構造兩個矩形塊，如下：
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無标題文檔</title>
<style>
.show-box{
width: 250px;
height: 250px;
border: 1px solid black;
display: block;
}
.box01{
width: 50px;
height: 50px;
border: 1px solid black;
background-color: red;
}
.box02{
width: 50px;
height: 50px;
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<div class="show-box">
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>
2.當使用absolute将紅色方塊向右移動50個像素時：
.box01{position：absolut；left：50px};
由于紅色方塊使用了position中的absolute屬性移動了擺脫了靜态定位，此時未進行定位的黃色方塊變成了唯一一個靜态定位的元素占據了原來紅色方塊的位置。
3.當使用relative将紅色方塊向右移動50個像素：
.box01{position:relative;left:50px;}
此時雖然紅色方塊向右移動了50個像素，但其原來的位置并不會被占據，這是relative屬性的特性之一。即原元素雖然改變了位置，但它原位置所占據的空間仍然存在。
4.在紅色方塊使用relative向右移動50個像素的基礎上，再使用absolute将黃色方塊向下移動50個像素：
.box02{position:absoulte;top:50px;}
這個時候發現黃色方塊并沒有移動，它距離黑色邊界線仍然是50個像素。
5.現在改變一下代碼将.box02中的absolute改為relative：
此時發現黃色方塊距離黑色邊界線100個像素。在沒有改變top數值時為什麼黃色方塊會向下移動50個像素呢？這就是relative的第二個特性，即元素移動的參照物是元素本身。也就是說黃色方塊是在原來的位置上向下移動了50個像素。