我正在尝试使用HTML和CSS创建水平100％堆叠条形图。我想使用具有背景颜色和百分比宽度的DIV创建条形，具体取决于要绘制的值。我还希望有一条网格线来标记沿图的任意位置。

在我的实验中，我已经通过分配CSS属性float：left来使这些条水平堆叠。但是，我想避免这种情况，因为它确实以混乱的方式使布局混乱。此外，当条形图浮动时，网格线似乎也无法很好地工作。

我认为CSS定位应该可以处理此问题，但是我还不知道该怎么做。我希望能够指定几个元素相对于其容器左上角的位置。我经常遇到这种问题(即使在这个特定的图形项目之外)，所以我想要一种方法：

• 跨浏览器(理想情况下没有太多的浏览器黑客攻击)
• 在怪癖模式下运行
• 尽可能清晰/整洁，以方便自定义
• 如果可能，请在不使用JavaScript的情况下进行。

解决方案

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

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：relative"，然后对于子元素，只要子元素具有" position：absolute"，则" top"和" left"将相对于容器的左上角。 CSS 2.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的左上角将向下#px，而应将其#container的左上角左50px。如果未设置#container位置：relative，则#box的坐标将相对于浏览器查看端口的左上角。

希望能有所帮助。