html - 当固定元素位于上方时，防止应用悬停属性

Question

我有以下代码:

<div class="image-container">
    <div
        id="main-article-image"
        class="h-100 w-100 img-blur"
        style$="background-image: url('{{getArticleImage(article)}}');"
    >
    </div>
    <div class="overlay">Ariticle description...</div>   
</div>

<div id="article-container">...</div>

这是这些元素的 CSS 属性:

.image-container {
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    color: white;
    font-family: Raleway-Light;
    font-size: 15px;
    padding: 15px;
    text-align: center;
    z-index: 3;
}

.overlay:hover {
    text-decoration: underline;
}

.image-container:hover .overlay {
    opacity: 1;
}

#article-container {
    position: fixed;
    top: 0;
    right: var(--my-elem-right);
    transition: right 0.3s linear;
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow: auto;
}

我将我的 #article-container 元素设置为 position: fixed 并且当一个元素被点击时，它将显示在 .image-container 上方 元素。问题是，当显示固定元素并且我将鼠标悬停在放置 .overlay 元素的位置(在固定元素后面)时，.overlay 文本仍然显示并且可以看到绝对定位在页面上。

Here你可以看到元素的通常行为和here不受欢迎的。红色标记显示鼠标放置的位置，以便显示 .overlay 元素。

知道如何解决这个问题吗？

Answer 1

这是因为您在 .overlay 元素上定义了 Z-index，而不是在其他元素上。您可以通过以下 z-index 层次结构来修复它。请记住，要使 z-index 正常工作，您始终需要一个不同于静态的位置值。

.image-container {
    position: relative;
    z-index: 1;
}
.overlay {
    position: absolute;
    z-index: 2;
}
#article-container {
    position: fixed;
    z-index: 3;
}