css——在css position 定位 中, relative 和 absolute 的关系

relative:定位是相对于自身位置定位(设置偏移量的时候,会相对于自身所在的位置偏移)。设置了relative的元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位,在没有设置宽度的情况下,宽度是整个浏览器的宽度。

absolute:定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。脱离后原来的位置相当于是空的,下面的元素会来占据位置。

<div style="position: relative;">
    大容器
    <div style="position: absolute;left:1px;top: 2px;">
        小容器
    </div>
</div>

详见: https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html

猜你喜欢

转载自blog.csdn.net/qq_43201350/article/details/121703752
今日推荐