关于div内部绝对定位的div，位置并不根据父元素的来定位的笔记

今天遇到一个奇怪的现象，

假如html  body：

<div id="div1">

         <div id="div2"></div>

</div>

CSS:

#div1{

height:200px;

width:200px

}

#div2{

    position: absolute;
    margin: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    height:200px;

    width:200px

}

按我原先的理解来讲说应该div2在div1内上下左右都居中，而事实上却在body中居中，这让我困惑了很久。

后来发现将div1的 position设为relative才能达到原来预想的效果。

缘由是绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；要想相对父元素定位，父元素必须设置相对定位（relative）。