關於div內部絕對定位的div,位置並不根據父元素的來定位的筆記

今天遇到一個奇怪的現象,html

假如html  body:spa

<div id="div1">htm

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

</div>io

CSS:margin

#div1{top

height:200px;di

width:200pxco

}position

#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)。

相關文章
相關標籤/搜索