我想在网页底部每 980 像素"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放一个div，类为"height_mark"。

问题：出于某种原因，它没有显示高度标记。

Answer 1

在JS中使用"margin-top"而不是"bottom"，并定义添加的每个div的边距(也将其封装在函数中并确保调用该函数(：

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

并在css中使用position:relative：

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

代码笔：

https://codepen.io/pen/bGVNYmm