一个HTML元素相对于其容器使用CSS定位一个HTML元素相对于其容器使用CSS定位(Positio

我试图创建一个使用HTML和CSS水平100％堆叠条形图。我想创建一个使用与背景颜色和宽度的百分比取决于我想要绘制图形的值的DIV酒吧。我也希望有一个网格线，以纪念沿图中的任意位置。

在我的实验，我已经接到了酒吧通过分配CSS属性叠加水平float: left 。不过，我想避免这种情况，因为它似乎真的惹的混淆的方式布局。此外，网格线似乎并没有当杆浮动很好地工作。

我认为，CSS定位应该能够处理这个问题，但我还不知道怎么办呢。我希望能够指定相对于其容器的左上角的几个要素的位置。我碰到这种问题的定期（甚至超出这个特定的图形项目的），所以我想这是一个方法：

跨浏览器（最好是没有太多的浏览器黑客）
怪癖模式运行
清晰/尽可能干净，方便的自定义
如果可能的话没有JavaScript完成。

Answer 1:

你是正确的，CSS定位是要走的路。这里有一个快速跑下来：

position: relative一个元件相对于将布置到其自身。 换句话说，这些元件在正常流动布局，那么它是从正常流取出，并通过已指定（顶部，右，下，左）的任何值的偏移。需要注意的是，因为它是从流中除去，它周围的其他元素不会与它转移（而不是如果您希望此行为，请使用切缘阴性）是很重要的。

但是，你最有可能在感兴趣的position: absolute其中一个元素相对于容器将定位。默认情况下，该容器是浏览器窗口，但如果父母元素或者具有position: relative或position: absolute设置就可以了，然后它会为定位父及其子协调行动。

展示：

<div id="container">
   <div id="box"> </div>
</div>

#container {
  position: relative;
}

#box {
  position: absolute;
  top: 100px;
  left: 50px;
}

在这个例子中，左上角#box将是100像素下来，50px的左边的左上角#container 。如果#container没有position: relative设置的坐标， #box是相对于浏览器视口的左上角。

希望帮助。

Answer 2:

你必须明确地设置父容器的位置与子容器的位置一起。做到这一点的典型方式是这样的：

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

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

Answer 3:

我知道我迟到了，但希望这有助于。

以下是位置属性的值。

静态的
固定
相对的
绝对

位置：静态

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

#myelem {
    position : static;
}

位置是：固定

这将设置的元件的位置相对于所述的浏览器窗口（视口）。固定定位元件将保持在其位置甚至当页面滚动。

（理想的，如果你想在页面的右下角滚动到顶部的按钮）。

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

位置：相对

要放置的一个元素的新相对于原来的位置的位置。

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

以上CSS将#myelem元素30像素的左侧和30像素从它的实际位置的上方移动。

位置：绝对

如果我们要放置在页面的确切位置的元素。

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

以上CSS将在页面位置的位置30PX #myelem元素从顶部和300像素从左边，它会与页面滚动。

最后...

相对+绝对位置

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

#container {
    position : relative;
}

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

我们可以在上述图像＃DIV-2元件被定位在#container的元素中的右上角中看到的。

GitHub的：你可以发现上面的图像的HTML 这里和CSS 这里。

希望本教程帮助。

Answer 4:

绝对定位的定位元件相对于其最接近的定位的祖先。所以，把position: relative容器上，那么对于子元素， top和left将是相对于容器的左上角，只要子元素具有position: absolute 。更多信息，请CSS 2.1规范。

Answer 5:

如果你需要一个元素的相对位置，以它包含的元素首先，你需要添加position: relative 的容器元素 。要相对定位于母公司的子元素必须有 position: absolute 。那绝对定位的工作方式是， 它是相对于第一相对（或绝对）定位的父元素来完成 。在情况下， 没有相对定位的父，元件将相对于根元素 （直接到HTML元素）被定位。

所以，如果你想你的孩子元素定位到父容器的左上角，你应该这样做：

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

你会从阅读大大受益这篇文章。希望这可以帮助！

文章来源: Position an HTML element relative to its container using CSS