position: relative
将相对于 自身 布置一个元素 。 换句话说,将元素以常规流程布置,然后将其从常规流程中移除并通过您指定的任何值(顶部,右侧,底部,左侧)偏移。重要的是要注意,因为它已从流中删除,所以周围的其他元素也不会随之移动(如果您希望这种行为,请使用负边距代替)。
但是,您最可能对position: absolute
哪个元素相对于容器定位感兴趣。默认情况下,容器是浏览器窗口,但是如果父元素具有position: relative
或position: absolute
设置在其上,则它将用作为其子元素定位坐标的父元素。
展示:
#container {
position: relative;
border: 1px solid red;
height: 100px;
}
#@R_908_2419@ {
position: absolute;
top: 50px;
left: 20px;
}
<div id="container">
<div id="@R_908_2419@">absolute</div>
</div>
在该示例中,的左上角#@R_908_2419@
将为,其左上角向下为100像素,而的左上角为50像素#container
。如果#container
未position: relative
设置,则其坐标#@R_908_2419@
将相对于浏览器视口的左上角。