无法让 div / 部分出现在响应式 img 元素上答案

【问题标题】：Can't get div / section to appear over responsive img element无法让 div / 部分出现在响应式 img 元素上
【发布时间】：2015-11-04 09:16:14
【问题描述】：

以下代码有几个问题。想法是有一排三张图片，每张图片都包含在它自己的部分标签中，然后有另一个部分直接出现在它上面。确实，这里有两个问题，因为类别链接不是居中对齐而是左对齐，而且 div 出现在 img 下方而不是上方。它是响应式的，所以我不能只设置一个固定的高度，我已经尝试过 height: 100%;到本节功能第三，无济于事。话虽如此，这是我现在使用的代码：

首先是 HTML：

 <section class="feature-third fade-in two">
 <a href="#" title="">
 <img width="960" height="960" src="img.jpg" class="attachment-full wp-post-image" alt="" />
 <section class="feature-caption"><p class="category-link">Category Name</p>    <h2>Title of Article</h2></section>
 </a>
 </section>

现在是 CSS：

.feature-third { float: left; width: 33.333%; color: #FFF; overflow: hidden; display: block; }
.feature-third a img { opacity: 1; transition: transform 0.25s ease-in-out 0s, opacity 0.25s ease-in-out 0s; }
.feature-third a:hover img, .feature-third a:hover img { opacity: 0.75; transform: scale(1.1, 1.1); }
.feature a, .feature-third a { color: #FFF; text-decoration: none; }
.feature-third .feature-caption {
    position: absolute;
    z-index: 100;
    text-align: center;
    width: 100%;
    left: 0px;
    bottom: 0px;
    color: #FFF;
    padding-bottom: 10px;
    background: transparent linear-gradient(to bottom, transparent 0%, transparent 1%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0% 0%;
}
.feature-third .feature-caption .category-link {
    background: #000;
    border-radius: 14px;
    display: inline-block;
    padding: 4px 10px;
    min-width: 90px;
    height: 31px;
    line-height: 31px;
    color: #FFF;
    font-size: 11px;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
}

【问题讨论】：

也许你可以提供一个演示（jsfiddle.net）。我无法用上面的代码复制您描述的问题。
我尝试在 CodePen 中执行此操作，但无法让它在我自己的网站上以相同的方式出现。所以我做了一个 HTML 示例，去掉了很多我目前没有用来显示这种效果的代码：thecleverroot.com/feature-third.html
所以您希望类别链接（“帖子”）显示在图片的中心和上方？
Micheal，我希望整个功能标题 div 出现在图像上方。不仅仅是类别链接，尽管这肯定是其中的一部分。

标签： html css image absolute

【解决方案1】：

我无法解决您的代码的问题，也许有一些我不明白的地方。但是根据您的代码，我做了一个示例小提琴：http://jsfiddle.net/5p2pztqr/

没看懂这里加宽度的目的：

.feature-third { 
    width: 33.333%; 
}

希望对你有帮助:)

【讨论】：

这很容易回答。将有三个 .featured-third div。每个都包含一个图像和单行标题（适用于台式机和平板电脑），因此宽度为 33.333%。尽可能接近 100%。
因此在您的示例中，您有一个名为#featured 的div，其固定宽度为960px，高度为200px。不好。必须是 100% 宽度，高度是灵活的，会根据三个图像的高度而变化。

【解决方案2】：

解决了！这是我用来使它工作的新代码。

首先我交换了标题和图片的 HTML 定位：

 <section class="feature-third fade-in two">
 <a href="#" title="">
 <section class="feature-caption"><p class="category-link">Category Name</p>    <h2>Title of Article</h2></section>
 <img width="960" height="960" src="img.jpg" class="attachment-full wp-post-image" alt="" />
 </a>
 </section>

然后在 CSS 中进行这些更改：

然后添加位置：相对于我的特征第三列：

body.home .feature-third { position: relative; float: left; width: 33.333%; color: #FFF; overflow: hidden; display: block; }

成功了！

【讨论】：