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位置开始。

你需要调整一些细节才能尝试，但我希望这会有所帮助。

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

1 个答案: