HTML中进行相对定位一般我们都会使用CSS的POSITION属性进行实现。我们会将子元素的POSITION设置为ABSOLUTE,但是当我们看界面时,子元素竟相对于浏览器窗口进行了定位。如何让子元素相对于父元素进行定位呢?怎么才可以把子元素定位到父元素的某个位置(左上、右上等等),这时我们要设置父元素的POSITION为RELATIVE,当我们再次刷新浏览器,便看到了子元素定位到了父元素的相对位置!

<div style="position:relative;">
    <div style="position:absolute;right:0px;top:0px;">
        我定位在父元素的右上方
    </div>
    <div style="position:absolute;left:0px;top:0px;">
        我定位在父元素的左上方
    </div>
    <div style="position:absolute;bottom:0px;right:0px;">
        我定位在父元素的右下方
    </div>
    <div style="position:absolute;bottom:0px;left:0px;">
        我定位在父元素的左下方
    </div>
</div>
大家在设置HTML的子元素相对定位时一定要记得设置父元素的POSITION属性为RELATIVE哦!