如何在悬停时使元素位于顶部（过渡后）答案

【问题标题】：How to make element on top on hover (after transition)如何在悬停时使元素位于顶部（过渡后）
【发布时间】：2020-12-02 22:29:11
【问题描述】：

我有一个 css 大师的问题，我无法解开。

这是html：

<div class="container">
    <div class="around">
        <img class="depiction around-depiction"/>
        <div class="label">A label</div>
    </div>
    <div class="around">
        <img class="depiction around-depiction" />
        <div class="label">Another label</div>
    </div>
    ...
    <div class="center">        
        <img class="depiction center-depiction" />
        <div class="label">Center label</div>
    </div>
</div>

我已对 .around 元素应用了变换，以围绕 .center 元素移动。

我不能做两件事：

当我将鼠标悬停在图像上时，图像及其标签应高于所有内容（我输入了 z-index: 10000，但这不起作用
在 .around 标签上方制作 .around 图像。您可以通过图 2 看到，hover 在标签 div 上不起作用。

这是css：

.container .circle {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: calc(-100px / 2);
    border-radius: 50%;
}

.center {
    border-radius: 50%;
    z-index: 1;
    position: absolute;
}

.depiction {
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
}

.around-depiction:hover {
    transform: scale(4);
    z-index: 1000000;
}

.center-depiction:hover {
    transform: scale(2);
    z-index: 1000000;
}

.label {
    opacity: 0;
    min-width: 200px;
    z-index: -2;
    background: white;
    border-radius: 10px/20px;
    padding: 5px;
    border: 1px solid black;
}

.center:hover .label,
.around:hover .label {
    opacity: 1;
    z-index: 5;
}

.center .label:hover,
.around .label:hover {
    opacity: 0;
}

【问题讨论】：

你试过用这个吗？ z-index: 1000000 !important;
是的，它不起作用。不受 z-index 影响的元素是类 .around 的元素，位于中心图像周围的圆圈中。他们已经通过使用 javascript 的过渡来解决。
尝试在悬停时更改.circle 元素上的z-index。请注意，z-index 必须高于其他索引，至少高于 1。
看起来你可能想要.container{ position:relative; } .container>div{ position:absolute; }。然后设置你的z-indexes。
谢谢@StackSlave 这行得通。我缺少的是在包含img 的div 上设置z-index 和position。我现在想念的是在悬停之前在所有内容下都有图像标签。最重要的是悬停。

标签： javascript html css css-transitions z-index

【解决方案1】：

尝试在图像/标签上添加带有position: relative; 的 z-index。 z-index 在默认情况下不起作用，即position: static;

https://coder-coder.com/z-index-isnt-working/

【讨论】：