问相对于元素的容器定位元素

EN

您说得对，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的左上角将是#container的左上角的100px向下和50px的左上角。如果#container未设置position: relative，则#box的坐标将相对于浏览器视图端口的左上角。

您必须显式设置父容器的位置以及子容器的位置。典型的方法是这样做：

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

我知道我来晚了，但希望这能有所帮助。

以下是position属性的值。

• static
• fixed
• relative
• absolute

静态位置：

这是默认设置。这意味着元素将出现在它通常会出现的位置。

#myelem {
    position : static;
}

固定位置：

这将设置元素相对于浏览器窗口(视区)的位置。即使在页面滚动时，固定定位的元素也将保持在其位置。

(如果您想要在页面右下角滚动到顶部按钮，则是理想的选择)。

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

位置:相对

将元素放置在相对于其原始位置的新位置。

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

上面的CSS将把#myelem元素向左移动30px，并从其实际位置的顶部移动30px。

位置:绝对

如果我们想要将一个元素放在页面中的确切位置。

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

上面的CSS将把#myelem元素定位在页面顶部的30px和左侧的300px的位置，它将与页面一起滚动。

最后..。

相对位置+绝对

我们可以将父元素的position属性设置为relative，然后将子元素的position属性设置为absolute。这样，我们就可以将子对象相对于父对象定位在一个绝对位置。

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

​

​

在上图中我们可以看到，#-2容器元素位于#容器元素的右上角。

GitHub:您可以找到上面图片here和CSS here的HTML。

希望这篇tutorial能帮上忙。