CSS 下拉菜单未应用 Z-Index

Question

首先，我知道有与我类似的问题，这是一个重复的问题，但是 none 的解决方案已经解决了我的问题。我不确定为什么会发生这种情况，但无论我做什么，我的下拉菜单都没有应用 -1 z-index。本质上，如果我将鼠标悬停在元素最终所在的位置上，它就会出现，因此它的 z-index 为 10，就像 header 一样。我不能再包含代码，因为如果我这样做，它不会让我 post 任何东西，但是 header 的位置是绝对的，z-index 是 10.

编辑：再次说明我知道有类似的问题and/or重复的问题，但是none解决了我的问题。

HTML

<ul>
    <li class="menu-item"><a href="#">HOME</a></li>
    <li class="menu-item"><a href="#">JOURNAL</a></li>
    <li class="menu-item dropdown-item">
        <a href="#">MEMBERS 
            <span class="icon-container">
                <i class="fas fa-chevron-down"></i>
            </span>
        </a>
       <ul class='dropdown-menu'>
           <li class="dropdown-link"><a href="#">Member 1</a></li>
           <li class="dropdown-link"><a href="#">Member 2</a></li>
           <li class="dropdown-link"><a href="#">Member 3</a></li>
       </ul>
    </li>
    <li class="menu-item"><a href="#">VIDEOS</a></li>
</ul>


ul {
        float: right;
        list-style: none;
        @include clearfix;
        li.menu-item {
            float: left;
            position: relative;
            z-index: 10;
            &.current-menu-item, 
            &.current_page_item,
            &:hover {
                a {
                    color: $pink;
                }
            }
            &.dropdown-item {
                .icon-container {
                    display: inline-block;
                    transition: all .2s ease-in-out;
                    transform: rotate(0);
                    margin-left: 5px;
                    i {
                        font-size: 1.8rem;
                    }
                }
                &:hover {
                    .icon-container {
                        transform: rotate(180deg);
                    }
                    .dropdown-menu {
                        opacity: 1;
                        transform: translateY(0);
                        z-index: 0;
                    }
                }
                ul.dropdown-menu {
                    position: absolute;
                    z-index: -1 !important;
                    opacity: 0;
                    transform: translateY(50px);
                    transition: all .2s ease-in-out;
                    min-width: 200px;
                    background: $grey;
                    padding: 10px 15px;
                    li.dropdown-link {
                        border-bottom: 1px solid $light-grey;
                        padding-bottom: 5px;
                        &:last-of-type {
                            border-bottom: none;
                            padding-bottom: 0;
                        }
                        &:hover {
                            a {
                                color: $pink;
                            }
                        }
                        a {
                            display: block;
                            font-family: 'Oswald', sans-serif;
                            font-weight: $medium;
                            color: $white;
                            transition: all .2s ease-in-out;
                            text-decoration: none;
                            font-size: 2rem;
                            position: relative;
                            &::after {
                                content: none;
                            }
                        }
                    }
                }
            }
            &:last-child {
                a {
                    &::after {
                        content: none;
                    }
                }
            }
            a {
                display: block;
                font-family: 'Oswald', sans-serif;
                font-weight: $medium;
                color: $white;
                transition: all .2s ease-in-out;
                text-decoration: none;
                font-size: 2rem;
                padding: 10px 16px;
                position: relative;
                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    height: 5px;
                    width: 5px;
                    background: $white;
                    right: -2px;
                    top: 50%;
                    transform: translateY(-50%) rotate(45deg);
                }
            }
        }
    }

Answer 1

这是因为它采用父 z-index。真的没有办法解决这个问题。当您将鼠标悬停在 "supposed" 所在的位置时，它会显示的原因是因为它就在那里。将某物的不透明度设置为 0，留在原地...但使其不可见。

您要做的是在可见性：隐藏和可见性：可见之间切换。这样你就不会仅仅使用 z-index 和不透明度来隐藏一些东西。

ul {
    float: right;
    list-style: none;
    @include clearfix;
    li.menu-item {
        float: left;
        position: relative;
        z-index: 10;
        &.current-menu-item, 
        &.current_page_item,
        &:hover {
            a {
                color: $pink;
            }
        }
        &.dropdown-item {
            .icon-container {
                display: inline-block;
                transition: all .2s ease-in-out;
                transform: rotate(0);
                margin-left: 5px;
                i {
                    font-size: 1.8rem;
                }
            }
            &:hover {
                .icon-container {
                    transform: rotate(180deg);
                }
                .dropdown-menu {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0);
                    z-index: 0;
                }
            }
            ul.dropdown-menu {
                position: absolute;
                opacity: 0;
                visibility: hidden;
                transform: translateY(50px);
                transition: all .2s ease-in-out;
                min-width: 200px;
                background: $grey;
                padding: 10px 15px;
                li.dropdown-link {
                    border-bottom: 1px solid $light-grey;
                    padding-bottom: 5px;
                    &:last-of-type {
                        border-bottom: none;
                        padding-bottom: 0;
                    }
                    &:hover {
                        a {
                            color: $pink;
                        }
                    }
                    a {
                        display: block;
                        font-family: 'Oswald', sans-serif;
                        font-weight: $medium;
                        color: $white;
                        transition: all .2s ease-in-out;
                        text-decoration: none;
                        font-size: 2rem;
                        position: relative;
                        &::after {
                            content: none;
                        }
                    }
                }
            }
        }
        &:last-child {
            a {
                &::after {
                    content: none;
                }
            }
        }
        a {
            display: block;
            font-family: 'Oswald', sans-serif;
            font-weight: $medium;
            color: $white;
            transition: all .2s ease-in-out;
            text-decoration: none;
            font-size: 2rem;
            padding: 10px 16px;
            position: relative;
            &::after {
                content: '';
                display: block;
                position: absolute;
                height: 5px;
                width: 5px;
                background: $white;
                right: -2px;
                top: 50%;
                transform: translateY(-50%) rotate(45deg);
            }
        }
    }
}

CSS 下拉菜单未应用 Z-Index

CSS Dropdown Menu Not Applying Z-Index

css

sass

z-index

dropdown