特写文章容器，图片由邮政信息覆盖

Question

我想要达到的目标似乎相对简单，但我似乎无法让它发挥作用。

我想让我的文章预览在我的网站上以平铺的形式出现。

为了便于论证，瓷砖将是一个固定的高度和宽度。让我们说300便士乘300便士。

我想要的标题，这篇文章，甚至可能出现一个简短的节选，覆盖图像。有点像theverge.com所拥有的。

我需要帮助的是，我只是试图做一个概念模拟的证据。我可以自己做具体的造型，但它的字面结构，我似乎无法弄清楚。

我似乎无法让h1覆盖img。

我尝试创建一个父容器div，然后在单独的div容器中包含两个元素，并为容器提供h1或"post信息“绝对定位。

但它似乎从来没有完全正确的结果。

HTML:

<div class="container">

    <div class="feat-img">
        <img src="www.sample.com"/>
    </div>

    <div class="post-info">
        <h1>Post Title</h1>
    </div>

</div>

CSS:

.container: {width: 300px; height:300px;float:left;}

.feat-img img: {width:300px; height:300px; float:left;}

.post-info: {position:absolute;bottom:0px;}

好的，我知道这种风格有很多问题，但我只是从头顶上做的。这是我思想的总称。

任何帮助都是非常感激的，因为我没有发现任何东西(可能是因为我真的不知道我在寻找什么)。

Answer 1

首先，您需要知道绝对div与相对div是如何关联的。

添加

.feat-img {
    position:relative;
    height:300px;
    width:300px;
}

你的CSS，

并将.post-info div放置在.feat-img div中：

<div class="feat-img">
  <div class="post-info">
    <h1>Post Title</h1>
   </div>  
   <img src="image.jpg"/>
 </div>

应用此CSS：

.post-info {
    position:absolute;
    bottom:0px; /* or whatever position */
    left:0px; /* or whatever position */
}

请看一下这个jsFiddle以获得一个快速的模型：http://jsfiddle.net/ZJT6f/

干杯,

耶伦

Answer 2

看看这个：演示

html代码：

<div class="container">
<div class="feat-img"><img src="http://lorempixel.com/300/300/"/></div>
<div class="post-info"><h1>Post Title</h1></div>
</div>

css代码：

*{margin:0; padding:0}
.container: {width: 300px; height:300px; display:block; position: relative;}
.feat-img img: {width:300px; height:300px; position:absolute; top:0; left:0; display:block;}
.post-info{position:absolute; top:130px; left:0; display:block; width:300px; height:300px; text-align: center; color:#fff;}