绝对定位的 div 不会留在原地

Question

好的，所以我有这些名为“latestWorkTitle”的 div，它们是绝对定位的，并放置在相应图像的顶部以显示其标题。

但是，我无法正常工作。标题没有显示在相应的图像上，当我调整浏览器窗口的大小时，一切都会发生变化等等。

我尝试使用我的一部分代码创建这个 jsbin http://jsbin.com/uhoxef/1，以说明它应该是什么样子以及出了什么问题。甚至所有标题在代码中都在彼此之上，而它们应该在相应图像之上......我基本上完全迷失了这一点。

Answer 1

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

HTML：

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

CSS：

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

为此，每个thumbnail 类都需要是每个单独层的relative 开始。所以thumbnail 类设置为相对。 该层内设置为absolute (.latestWorkTitle) 的任何对象都将从相对对象的top 和left 位置开始。

您需要调整一些细节以适应口味，但我希望这会有所帮助。