z-index div 在 div 内图像之后的前面

Question

我有一个 div，里面有一个 img 和另一个 div，我想要图像显示第二个 div，我该怎么做？
（我有多个）
不知道怎么做这个，尝试了很多东西......

#pointTerminal {
    padding: 6px;
    position: absolute;
    left: 359px;
    top: 607px;
    transform: translate(-50%, -50%);
}
#pointParking {
    padding: 6px;
    position: absolute;
    z-index: 15;
    left: 356px;
    top: 586px;
    transform: translate(-50%, -50%);
}

#pointIcon {
    top: 0%;
    position: absolute;
    max-width: 100%;
    height: 100%;
    color: red;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition:  .3s; /* Animation */
    z-index: 2;
}

#cardpoint {
  position: absolute;
    flex-direction: column;
    max-width: 200px;
    min-height: 30px;
    border-radius: 10px;
    margin-bottom: 10px;
    background-color: #2a2a2a;
   opacity: 0;
  transition: opacity 0.3s ease, height 0.3s ease;
  pointer-events: none;
  z-index: 66;
}

<div id="pointTerminal">
    <img id="pointIcon" src="https://picsum.photos/500">
        <div id="cardpoint" >
            <p id="cardTitle">Terminal</p>
        </div>
</div>

<div id="pointParking">
    <img id="pointIcon" src="https://picsum.photos/400">
        <div id="cardpoint" >
            <p id="cardTitle">Legion Square</p>
        </div>
</div>

我希望“cardpoint”div 位于“pointIcon”img 前面，它需要在 html 中按此顺序

Answer 1

AFAIK，您不能在 img 标签内放置 div（或任何其他标签）。如果您的预期结果是这样的：

您可以尝试以下方法：

.container {
  /* this is the div that contains the image and the inner div */
  position: relative;
  /* adjust size to your needs, both are mandatory to be displayed */
  height: 200px;
  width: 200px;
  /* if you use a local file, instead of a link use the image address, based on your project; keep the "url()"; for example: url("root-folder/image-name.file-extension") */
  background-image: url("https://images.unsplash.com/photo-1670272502972-cccb4b96c4f4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
  background-size: cover;
  background-repeat: no-repeat;
}

.inner-div {
  /* div on top of the image */
  position: absolute;
  height: 100px;
  width: 100px;
  /* you can change the color of the div to whatever suits you */
  background-color: red;
  /* this centers the div inside the parent; change it based on what you want to achieve */
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
    <div class="inner-div"></div>
</div>

<!-- place it in the body or wherever you need it --!>

这可以应用于任意多的 div。为了同时对它们进行时尚设计，我建议您使用类而不是 ID。

Answer 2

你可以试试这个： pointTerminal、pointParking 设置相对位置，而 pointIcon 你应该设置绝对位置

<div class="container"
    <div id="pointTerminal" />
    <img id="pointIcon" src="https://picsum.photos/500">
        <div id="cardpoint" >
            <p id="cardTitle">Terminal</p>
        </div>
</div>

<div class="container">
<div id="pointParking" />
    <img id="pointIcon" src="https://picsum.photos/400">
        <div id="cardpoint" >
            <p id="cardTitle">Legion Square</p>
        </div>
</div>

Answer 3

希望我能正确理解您的问题。阅读完您的代码后，我会说两件事。您提供的代码似乎不完整，您已将 cardpoint id 上的不透明度设置为 0，并且它还有一个过渡属性，所以我假设您有一些事件，例如悬停附加到 cardpoint div。

此外，您似乎在为所有内容使用“id”，而实际上您应该使用“class”。 “id”应用于唯一元素，我将提供一个示例，说明如何重构您的代码并根据您的要求以正确的顺序放置 img 和 div。

这里有一篇文章更深入地讨论了 id 和 class CSS 中的 id 和 class 有什么区别，什么时候应该使用它们？

<div id="pointTerminal">
    <img class="pointIcon" src="https://cdn.mos.cms.futurecdn.net/snbrHBRigvvzjxNGuUtcck.jpg">
    <div id="cardpoint1" class="cardpoint" >
      <p class="cardTitle">Terminal</p>
    </div>
</div>
<div id="pointParking">
    <img class="pointIcon" src="https://bpb-us-e2.wpmucdn.com/newsevents.illinoisstate.edu/dist/c/2/files/2016/02/Back_side_of_the_Moon_AS16-3021.jpg">
    <div id="cardpoint2" class="cardpoint" >
      <p class="cardTitle">Legion Square</p>
    </div>
</div>

body {
  background: #001c34;
}

#pointTerminal {
    padding: 6px;
    position: absolute;
    top: 20%;
    left: 60%;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#pointParking {
    padding: 6px;
    position: absolute;
    top: 20%;
    left: 20%;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pointIcon {
    position: absolute;
    mix-blend-mode: screen;
    max-width: 100%;
    z-index: -1;
}

.cardpoint {
    border-radius: 10px;
    padding: 0 10px;
    opacity: 0;
    transition: opacity 0.3s ease, height 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

#cardpoint1 {
  background: #ff83839e;
}

#cardpoint2 {
  background: #eddb5b9e;
}

#pointTerminal:hover .cardpoint,
#pointParking:hover .cardpoint {
  opacity: 1;
}

在我的示例中，我已将所有 id 更改为类，并为 cardpoint1 和 cardpoint2 创建了 id。 我在 .cardpoint 上保留了“不透明度：0”，并对#pointTerminal 应用了悬停效果，当悬停时它会将 .cardpoint 不透明度更改为 1，并具有所需的过渡值。我希望这会有所帮助，如果您有任何问题，请告诉我。