Question

我想知道是否可以在图像上放置div。我查了一下，显然它应该工作，我尝试了一些额外的容器和z-index的方法，但是当我这样做时，似乎没有什么工作。我现在有这个，但我的文字div应该在图像的顶部，只是漂浮在一些奇怪的地方。

<a href="portfoliodetail.php?id=<?=$id?>" title="<?=$title?>">
    <div class="latestWorkTitle"><?=$title?></div>
    <img src="images/portfolio/thumbnails/<?=$bgthumbnail?>" alt="<?=$title?>" class="noMargin" />
</a>

<style>
    latestWork a img {
        max-width: 28%;
        height: auto;
        margin-right: 7%;
        position: relative;
        float: left;
        z-index: 5;
    }

    .latestWorkTitle {
        width: 100px;
        height: 20px;
        position: relative;
        z-index: 10;
    }
</style>

Answer 1

您的a需要position: relative，然后其子女position: absolute

Answer 2

我知道这不是您正在寻找的解决方案，但为什么不尝试将图像放置为div的background-image，如下所示：

.selector {
  background-image: url('../img/img.png');
}

如果您尝试使用PHP动态执行此操作，则可以将CSS文件保存为.php文件，并包括变量名称。这似乎是一个更容易的选择。

将div放在图像顶部？

2 个答案: