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

Question

我正试图直接在图像上放置。

我尝试过同时给出图像和z-index值（因为通常z值较高的元素出现在顶部，对吧？）

Answer 1

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

您可能需要的是：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预览

注意： z-index的使用只有在position absolute或relative为z-index的情况下才有效。 ps：export interface AppState { auth: AuthState; contacts: ContactsState; events: EventsState; } 是CSS。

Answer 2

以下是我正在处理的相同答案的内联版本。

<div class="parent" style="position: relative;">
  <img src="http://placekitten.com/700/500?image=13">
  <div style="position: absolute; top: 250px; left: 170px;color: red;font-size: 100px;">My Div</div>
</div>