如何让cardpoint div置于pointIcon img前方（保持HTML结构不变）

我有多个嵌套容器div，每个容器内包含pointIcon图片和cardpoint div，需要让cardpoint显示在pointIcon前方，且必须保留当前HTML结构顺序，但尝试多种方法都没解决，原代码如下：

#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>

问题根源 #

原代码存在两个核心问题：

• ID重复使用：HTML中多个元素共用pointIcon、cardpoint、cardTitle ID，浏览器仅会识别第一个匹配的ID，导致后续元素样式失效。
• 定位层级未生效：虽然cardpoint设置了更高的z-index，但因ID重复，样式无法正确应用到所有目标元素。

修正后的代码 #

HTML（仅将重复ID改为类）

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

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

CSS（修正选择器并优化定位逻辑）

#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 {
    position: absolute;
    max-width: 100%;
    height: 100%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: .3s;
    z-index: 2; /* 低于cardpoint的层级 */
}

.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; /* 确保层级高于pointIcon */
    /* 可选：调整位置避免和图标重叠 */
    top: -40px;
    left: 50%;
    transform: translate(-50%, 0);
}

/* 鼠标悬停容器时显示cardpoint */
#pointTerminal:hover .cardpoint,
#pointParking:hover .cardpoint {
    opacity: 1;
    pointer-events: auto;
}

.cardTitle {
    color: #fff; /* 增加文字对比度 */
    padding: 8px 12px;
    margin: 0;
}

关键说明 #

• 用类选择器替代重复ID，确保样式能覆盖所有对应元素。
• 维持cardpoint的z-index值大于pointIcon，保证视觉层级更靠前。
• 添加hover触发逻辑，让cardpoint在交互时显示，同时恢复指针事件支持操作。
• 可选调整cardpoint的位置，避免和图标重叠，提升视觉体验。

内容的提问来源于stack exchange，提问作者ic3d_