我正在尝试使用 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将是 100px 向下和 50px 左上角的左上角#container。如果#container没有position: relative设置，坐标#box将相对于浏览器视口的左上角。
#box
#container
