关于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定位。