今天遇到一個奇怪的現象,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)。