我正在尝试使用HTML和CSS创建水平100％堆叠的条形图。我想DIVs根据背景颜色和百分比宽度创建条形，具体取决于要绘制的值。我还希望有一条网格线来标记沿图的任意位置。
DIVs
在实验中，我已经通过指定CSS属性来将条形图水平堆叠float: left。但是，我想避免这种情况，因为它确实以混乱的方式使布局混乱。此外，当条形图浮动时，网格线似乎不太好用。
float: left
我认为CSS定位应该可以处理此问题，但我还不知道该怎么做。我希望能够指定几个元素相对于其容器的左上角的位置。我经常遇到这种问题（即使在这个特定的图形项目之外），所以我想要一种方法：
您认为CSS定位是正确的做法。这是一个快速的总结：
position: relative将相对于 自身 布置一个元素 。 换句话说，将元素以常规流程布置，然后将其从常规流程中移除并通过您指定的任何值（顶部，右侧，底部，左侧）偏移。重要的是要注意，因为它已从流中删除，所以周围的其他元素也不会随之移动（如果您希望这种行为，请使用负边距代替）。
position: relative
但是，您最可能对position: absolute哪个元素相对于容器定位感兴趣。默认情况下，容器是浏览器窗口，但是如果父元素具有position: relative或position: absolute设置在其上，则它将用作为其子元素定位坐标的父元素。
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将相对于浏览器视口的左上角。
#box
#container
