如何添加通过div重叠的水平线？

Question

我正在使用javascript创建一个简单的条形图。所有样式都是通过javascript完成的。我有一个主容器：

var mainContainer = document.getElementById(element);
var chartContainer = document.createElement("div");
chartContainer.class = "graphite-container";
$(chartContainer).css({
  "padding-left": "50px",
  "height": "100%",
  "border-width": "1px",
  "border-style": "solid",
  "border-color": "black",
  "width": "100%",
  "margin-top": "20px",
  "padding-top": "20px"
});
$(mainContainer).append(chartContainer);

我想要通过高度标记的容器放置线条：

var addLines = function(dataObj) {
var specs = Object.values(dataObj);
var highestNumber = 0;
for (i = 0; i < specs.length; i++) {
  if (specs[i] > highestNumber) {
    highestNumber = specs[i];
  }
}
var interval = Math.round(highestNumber / 5);

for (i = 0; i <= highestNumber ; i += interval) {
  var separator = document.createElement("hr");
  separator.class = "horizontal-line";
  var separatorHeight = separatorInterval + '%';
  $(separator).css({
    "position": "absolute",
    "width": "100%",
    "color": "black",
  });
  $(chartContainer).append(separator);
}
};

我可以让线条显示的唯一方法是删除＆＃34;位置：绝对＆＃34;，然后它们就在我所拥有的栏杆的顶部。我尝试设置边距底部以将它们分开，但这并不起作用。我必须忘记一些CSS规则。