我想从网页底部起每隔980px放置一个带有“ height_mark”类的div

Question

这是我所拥有的：

Javascript（标头中带有jquery库）：

    var prev_height=0;
    for (var i=0; i<=100; i++) {
        prev_height+=980;
        $("body").append("<div class='height_mark' style='bottom:"+prev_height+"px'>"+(i)+"</div>");
    }

CSS：

.height_mark {
  position: absolute;
  left:300px;
  height:20px;
  width:30px;
  background-color:black;
  color:white;
}

我想做什么：我想从网页底部起每隔980px放置一个带有“ height_mark”类的div。

问题：由于某种原因，它不显示高度标记。

Answer 1

在JS中使用“ margin-top”代替“ bottom”，并定义要添加的每个div的保证金数量：

let winHeight = 0;
let padding = 980;

function addDivs(){
    for (var i=0; i<=100; i++) {
        winHeight+=980;
        $("body").append("<div class='height_mark' style='margin-top:"+padding+"px'>"+(i)+"</div>");
    }
    }

addDivs()

并使用position：相对于CSS：

.height_mark {
  position: relative;
  left:300px;
  height:20px;
  width:30px;
  background-color:black;
  color:white;
}

codepen：

https://codepen.io/pen/bGVNYmm