css - 我在将文本定位到图像时遇到问题

Question

我遇到了问题，因为当我将文本定位到消息中时，下面出现了一个空白区域。

这是图片:

http://img713.imageshack.us/img713/6513/lllmm.jpg

这是我正在使用的 CSS 代码。我不知道错误在哪里。

    .thumbnail2{
    position:relative;
    width:100%;
    margin:0 auto;
}
.thumbnail2 img{
    width:100%;
        height:auto;
}
.thumbnail2 h1{
    display:block;
    position:relative;
    top:-90px;
    left: 0;
    padding-left:5px;
        background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}
.thumbnail2 h1 span{
    font-size:34px;
    letter-spacing: -1px;
    line-height:40px;
}
.thumbnail2 h1 a{
    color:#FFF;
}

这是 HTML/PHP(我在 Wordpress 中使用它):

<div class="post">
                    <div class="thumbnail2">
                        <?php the_post_thumbnail('grandote'); ?>
                        <h1><span><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span></h1>
                    </div>
                        <div class="excerpt2"><p><?php echo get_excerpt(280); ?></p></div>
                    <div class="clear"></div>
                </div>

Answer 1

根据我收集到的信息，您想要的是在缩略图顶部显示文本。

你应该给 .thumbnail2 position: relative 和 .thumbnail2 h1 position: absolute。这样就可以了，之后您只需将 h1 标签定位在正确的位置，这次他的位置是相对于他的父 div 元素的。