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>大家在设置HTML的子元素相对定位时一定要记得设置父元素的POSITION属性为RELATIVE哦!