Абсолютный позиционный div не останется на месте

Question

Итак, у меня есть эти div'ы под названием "latestWorkTitle", которые расположены абсолютно и помещены поверх соответствующего изображения, чтобы показать его заголовок.

Однако я не могу заставить это работать должным образом. Заголовки не отображаются на соответствующем изображении, и когда я изменяю размер своего окна браузера, все меняется и так далее.

Я попытался создать этот 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 положение относительного объекта.

Вам нужно будет настроить некоторые детали по вкусу, но я надеюсь, что это поможет.