javascript - 从下到上运行覆盖，而不是从上到下

Question

我试图给出一个百分比对建筑物的影响。所以我在图像前面有一个叠加层，以提供某种提升效果。它正在工作，但从上到下而不是从下到上。我如何引用偏移量是正确的？

这是目前的样子

这是我的代码：

<script>
$(document).ready(function() {
  overlay = $("#overlay");
img = $("#myimg");
img.load( function(){
  var myPercent = 30;
  overlay.width($("#myimg").width());
  var myHeight = $("#myimg").height() / 100 * myPercent;
  alert(myHeight);
  overlay.height(myHeight);
  overlay.css("top", img.offset().top + "px");
  overlay.css("left", img.offset().left + "px");
});
});

</script>

<div id="overlay" class="overlay"></div>
<img id="myimg" src="building.png" />

编辑：http : //jsfiddle.net/7vA9U/jsfiddle

Answer 1

为覆盖提供以下 CSS：

#text-ovrelay {
    position: absolute;
    top: auto;
    bottom: 0;
}

这样，它停靠在底部，而不是顶部。

编辑：拿了你的代码并稍微改变了一点。检查出来。