如何使下拉菜单项覆盖其他块

Question

我有这个包含下拉菜单的面包屑部分，但该列表显示在其他块的后面。我知道这个问题很常见，并尝试使用 z-index 的数量，但没有任何效果。

代码如下：

           <div class="breadcrumb-wrap ">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item dropdown show">
                        1nd menu
                        <a class="dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-chevron-down color-info"></i>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item" href="https://www.google.com/">Sub1</a>
                            <a class="dropdown-item" href="https://www.google.com/">Sub2</a>
                            <a class="dropdown-item" href="https://www.google.com/">Sub3</a>
                        </div>
                    </li>
                    <li class="breadcrumb-item dropdown show">
                        2nd menu
                        <a class="dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-chevron-down color-info"></i>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item" href="https://www.google.com/">Sub1</a>
                            <a class="dropdown-item" href="https://www.google.com/">Sub2</a>
                        </div>
                    </li>
                </ul>
            </div>

第二块：

<section class="s-pt-xl-60 s-pt-lg-60 s-pt-md-60 s-pt-60 s-pb-xl-280 s-pb-lg-250 s-pb-md-90 s-pb-60">
    <div class="container">
        //some code
    </div>
</section> 

对于下拉菜单，它具有默认的 css：

.dropdown-menu {
    background-color: #fff;
    border: none;
    border-radius: 0.9rem;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    font-size: inherit;
    right: auto;
    line-height: 1.5;
    margin-top: 10px;
    padding: 40px;
    left: auto;
    width: 300px;
    z-index: 1004;
}

我在这段代码中遗漏了什么？

Answer 1

要使z-index 工作，您还必须设置position 并且不能是静态的。

所以，在您的班级中添加position，并将其放在前面。