html - 将文本放在图像上，无论它是否存在

Question

如果数据库中存在文本，我想将文本放在图像上；如果不存在，我想将文本放在图像上。

我面临的问题是，如果有图像，文本就会出现在图像下方，如果图像不存在，文本就会出现在正确的位置，如所附图片所述。代码如下:

<div class="category">
    <img src="home.php?cat={$mc.categoryid}"/>
    <div class="title">
       <h2>Some text</h2>
    </div>
</div>

我想按照以下方式做一些事情:

<style>
.category{
   width: 400px;
   height: 400px
}

.title {
   position: relative;
   top: 3px;
   left: 0;
   width: 100%;
   height: 50px;
}
</style>

Answer 1

给你的容器 category position relative。然后把absolute的position给.title。 position:absolute 从正常的内容流中取出分配给它的任何内容。容器上的 position:relative; 会将 position:absolute 元素保留在该空间内。但是您仍然可以将其移动到您想要的位置。因此，如果您想让 .title 出现在右下角，请应用 right:0 和 bottom:0

等样式>

Fiddle