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

Question

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

这是图像：

http://img713.imageshack.us/img713/6513/llllmm.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元素。

Answer 2

尝试为相对定位的元素添加负边距：

.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);

    margin-bottom: -90px; // This should fix it
}