HTML使用CSS的POSITION设置为ABSOLUTE进行相对定位 不要忘记设置父元素的POSITION为RELATIVE哦

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>

赞 0

打赏 微信扫一扫 支付宝扫一扫