Css 如何将元素置于<；之上的最佳方法；img>；标签？

我有一张卡片列表，卡片的背景是一张图片，必须在上面加上一些额外的信息。背景图像听起来不错吧？是的，但由于我需要动态设置这些图像，并且图像需要可编辑，所以背景图像不是一个选项（我知道有很多方法可以做到，但对于这种特殊情况，它不是一个选项）

这是我的名片

<figure>
<img src="foo.jpg" alt="">
<figcaption>
<h5>Name:<span>xyz</span></h5>
<h6>Location:<span>xyz</span></h6>
</figcaption>
</figure>

---

我宁愿阻止这种情况发生，但是如何防止呢？

您应该添加

位置：relative

，以便将元素从流程中移除

您需要调整“左”和“顶”属性

HTML

<figure>
    <img src="foo.jpg" alt="">
        <figcaption>
            <h5>Name:<span>xyz</span></h5>
            <h6>Location:<span>xyz</span></h6>
        </figcaption>
</figure>

---

如果这不是您想要的效果，请编辑您的问题以使其更清晰。

您应该添加

位置：相对
，以使元素脱离流程

您需要调整“左”和“顶”属性

HTML

<figure>
    <img src="foo.jpg" alt="">
        <figcaption>
            <h5>Name:<span>xyz</span></h5>
            <h6>Location:<span>xyz</span></h6>
        </figcaption>
</figure>


如果这不是您想要的效果，请编辑您的问题以使其更清晰。
使用
位置：绝对
，图像将相对于其第一个非静态祖先进行定位。因此，您需要在
图
中添加一个
位置：相对
，否则结果可能会出人意料，难道我不能给figcaption一个位置：相对，然后按顶部：20px定位以防止顶部边距为负吗？使用
位置：绝对
，图像将相对于其第一个非静态祖先进行定位。因此，您需要在
图
中添加一个
位置：相对
，否则结果可能会出人意料，难道我不能给figcaption一个位置：相对，然后按top:20px进行定位，以防止顶部边距为负吗？
<figure>
    <img src="foo.jpg" alt="">
        <figcaption>
            <h5>Name:<span>xyz</span></h5>
            <h6>Location:<span>xyz</span></h6>
        </figcaption>
</figure>

.container-of_the-cards{ /* This is actually a li-element with some different specs, but for illustrational purposes I guess this one is easier */
    width: 100%;
    display: inline-block;
}
figure{
    box-sizing: border-box;
    width: 30%;
    height: 300px;
    margin-right: 1.1%;
    overflow: hidden;
}

figure img{
    width: 100%;
    height: 100%;
    position: relative;
}

figcaption{
    box-sizing: border-box;
    margin: 0 20px;
    background: blue;
    margin-top: -280px;
}

figcaption h5{
    top-margin:30px;
}

figcaption h6{
    top-margin:80px;
}