I want to put divs with the class “height_mark” every 980px from the bottom of the webpage

Here's what I have:

Javascript(with a jquery library in the header):

    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;
}

What I want to do: I want to put a div with the class "height_mark" every 980px from the bottom of the webpage.

Problem: for some reason, it doesn't show the height marks.