如何在图像上放置 <div> ？

Question

我正在尝试将 a 直接放置在图像之上。

我尝试给出图像和 z 索引值（因为通常具有较高 z 索引的元素出现在顶部，对吧？）

Answer 1

为此，您必须使用 CSS。基本上，HTML 和 CSS 是共存的（检查开发工具，即使你没有给出任何 CSS，它也会有一些 CSS 属性）。

你可能需要的是这样的：

figure,
figcaption {
  margin: 0;
  padding: 0;
}

figure {
  display: inline-block;
  position: relative;
}

figure img {
  display: block;
}

figure figcaption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

<figure>
  <img src="https://i.imgur.com/3rcJO2J.jpg" alt="Image" width="200" />
  <figcaption>Hello!</figcaption>
</figure>

预览

注意：z-index只有当元素被指定为positionofabsolute或时，使用 of才会起作用并且有效relative。ps：z-index是CSS。