CSS 覆盖没有出现在 上？

Question

我使用的主要结构是:

<div class="portfolio-thumbs">
    <div class="col-md-4 thumb-item">
        <a href="#">
            <div class="thumb-img">
                <img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
                <div class="thumb-overlay"></div>
            </div>
        </a>
    </div>
   ...
</div>

我创建了一个完整的 JS Fiddle here

我想为图像添加一个半透明的叠加层(稍后将添加过渡和一些内容以从每个图像的底部滑入)，但似乎无法让它出现。

与其他几篇关于 SO 的文章进行了比较，但似乎没有一篇符合要求。

我之前已经做过一千次了，知道这有什么问题吗？

Answer 1

在@ZachSaucier 的帮助下，将 100% 高度添加到树中的所有元素。还添加:

div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
    position: absolute;
    top: 0;
}

使叠加层位于 img 之上。

更新 fiddle here