相对于其容器放置元素

相对于其容器放置元素

您认为CSS定位是正确的做法。这是一个快速的总结：

position: relative

将相对于 自身 布置一个元素 。
换句话说，将元素以常规流程布置，然后将其从常规流程中移除并通过您指定的任何值（顶部，右侧，底部，左侧）偏移。重要的是要注意，因为它已从流中删除，所以周围的其他元素也不会随之移动（如果您希望这种行为，请使用负边距代替）。

但是，您最可能对

position: absolute

哪个元素相对于容器定位感兴趣。默认情况下，容器是浏览器窗口，但是如果父元素具有

position:relative

或

position: absolute

设置在其上，则它将用作为其子元素定位坐标的父元素。

展示：

#container {  position: relative;  border: 1px solid red;  height: 100px;}#box {  position: absolute;  top: 50px;  left: 20px;}<div id="container">  <div id="box">absolute</div></div>

在该示例中，的左上角

#box

将为，其左上角向下为100像素，而的左上角为50像素

#container

。如果

#container

未

position:relative

设置，则其坐标

#box

将相对于浏览器视口的左上角。