从下到上运行叠加，而不是从上到下

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

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

编辑：取了你的代码并稍微改了一下。 Check it out