Absolute 绝对定位div-won'；我不能呆在原地

好的，我有一个叫做“latestWorkTitle”的div，它是绝对定位的，放在相应图像的顶部以显示其标题

然而，我不能让它正常工作。标题不会显示在相应的图像上，当我调整浏览器窗口大小时，所有内容都会移动，等等

---

我尝试用部分代码创建这个jsbin，以说明它应该是什么样子以及出了什么问题。即使在代码中所有的标题都位于彼此的顶部，而它们应该位于相应图像的顶部。。。我基本上对此完全不知所措。

我认为HTML本身很混乱。我还使缩略图类成为相对层。HTML在我们阅读时呈现，从左到右。因此，将标题放在图像之前会导致图像显示在顶部并覆盖文本

HTML:

要使其工作，每个

缩略图

类都需要是每个层的

相对开始。因此
缩略图
类被设置为相对。
此层中设置为
绝对
（
.latestWorkTitle
）的任何对象将从相对对象的
顶部和
左侧位置开始

你需要根据口味调整一些细节，但我希望这能有所帮助

<div class="thumbnail">
  <a href="portfoliodetail.php?id=10">
    <img src="http://www.hlnarchitects.com/img/plain_red.png" />
    <div class="latestWorkTitle">title1</div>
  </a>
</div>

.thumbnail {
  position: relative;
  overflow: hidden;
  float: left;}

.portfolioOverview img {
  width: auto;
  height: auto;}

.latestWorkTitle {
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  background: yellow;
  position: absolute;
  padding: 6px;
  top: 0;
  left: 0;}