将文本放在图像上是否存在

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。然后将position的{​​{1}}提供给absolute。 .title将所分配的内容从正常的内容流中取出。容器上的position:absolute将position:relative;元素保留在该空间内。但你仍然可以将它移动到你想要的地方。因此，如果您想让position:absolute显示在右下方，请应用.title和right:0

等样式

Fiddle

Answer 2

确保图片和文字都有position:absolute，.category有position:relative，文字的z-index高于图片的文字。

Answer 3

这样做的方法不止一种。

方法1.将“标题”置于“类别”div之外，如下所示：

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

方法2.将图像包含在另一个div内，并给出一个固定的宽度和高度，如下所示：

<div class="category">
    <div style="width:xx; height:yy;">
       <img src="home.php?cat={$mc.categoryid}"/>
    </div>
    <div class="title">
       <h2>Some text</h2>
    </div>
</div>

在上面，您根据要为图像分配的量，使用自己的xx和yy值。当然它不必是内联CSS。你可以给它另一堂课。