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

Question

Итак, у меня есть эти divs, называемые «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 относительного объекта.

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