關於absolute和relative

一直都很習慣用table進行佈局，對於div+css因爲實戰經驗很少，有些生疏。
在div+css佈局中很關鍵的是關於absolute和relative屬性的使用。
這裏作個備註：

absolute絕對定位，若是父級設置了absolute或relative，則相對於父級進行絕對定位，若是父級未設置absolute或relative，則一直向上查找，直到找到設置了absolute或relative的父級，若都沒設置該屬性，則相對於body進行絕對定位。

relative相對定位，相對父級進行定位

< style type ="text/css" >
body{
  padding:0;margin:0;
}
.header{
  padding:50px 100px;
  margin:50px 100px;
  height:300px;
  border:1px solid red;
}
.abc{
  width:300px;
  height:250px;
  border:1px solid yellow;

}
.def{
  width:200px;
  height:200px;
  border:1px solid blue;
  position:absolute;
  top:100px;
  left:100px;
}
</style>
< div class ="header" >
   < div class ="abc" >
     < div class ="def" >
    dddd
     </div>
   </div>
</div>

def的position爲absolute，而它的上級元素都沒有定義absolute或relative,那麼它就相對於body定位。