下拉菜单 z-index

Question

我正在研究这个 website，如您所见，单击 table 上方的蓝色按钮，会出现一个下拉菜单。

您还可以看到下拉菜单显示在 table thead 后面。我该如何解决？

我想将下拉菜单放在 table 上。

谢谢指教。

HTML:

<span class="dropdown open">
        <button aria-expanded="true" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Zimmer<br> Rooms
        <span class="caret"></span></button>
        <ul class="dropdown-menu">    
        <form class="filter">
                <input id="zimmer5" class="unchecked" type="checkbox"> 5.5
            <br>
                <input id="zimmer4" class="unchecked" type="checkbox"> 4.5
            <br>
                <input id="zimmer3" class="unchecked" type="checkbox"> 3.5
            <br>
                <input id="zimmer2" class="unchecked" type="checkbox"> 2.5
            <br>
        </form>
        </ul>    
        </span>
        <span class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Stockwerk<br> Floor
        <span class="caret"></span></button>
        <ul class="dropdown-menu">    
        <form class="filter">
                <input id="checkboxID" class="unchecked" type="checkbox"> EG
            <br>
                <input id="checkbox1OG" class="unchecked" type="checkbox"> 1.OG
            <br>
                <input id="checkbox2OG" class="unchecked" type="checkbox"> 2.OG
            <br>
                <input id="checkbox3OG" class="unchecked" type="checkbox"> 3.OG
        </form>
        </ul>    
        </span>
        <span class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Haus<br> House
        <span class="caret"></span></button>
        <ul class="dropdown-menu">    
        <form class="filter">
                <input id="haus1" class="unchecked" type="checkbox"> 1
            <br>
                <input id="haus2" class="unchecked" type="checkbox"> 2
            <br>
                <input id="haus3" class="unchecked" type="checkbox"> 3
            <br>
                <input id="haus4" class="unchecked" type="checkbox"> 4
            <br>
                <input id="haus5" class="unchecked" type="checkbox"> 5
            <br>
                <input id="haus6" class="unchecked" type="checkbox"> 6
            <br>
                <input id="haus7" class="unchecked" type="checkbox"> 7
            <br>
                <input id="haus9" class="unchecked" type="checkbox"> 9
            <br>
                <input id="haus11" class="unchecked" type="checkbox"> 11      
        </form>
        </ul>    
        </span>    
        <span class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Bruttomiete<br> Gross Rent
        <span class="caret"></span></button>
        <ul class="dropdown-menu">    
        <form class="filter">
                <input id="range1" class="unchecked" type="checkbox"> 1200 – 1600
            <br>
                <input id="range2" class="unchecked" type="checkbox"> 1600 – 2000
            <br>
                <input id="range3" class="unchecked" type="checkbox"> 2000 – 2400
            <br>
                <input id="range4" class="unchecked" type="checkbox"> 2400 – 3000
            <br>
                <input id="range5" class="unchecked" type="checkbox"> 3000 – 3400
        </form>
        </ul>    
        </span>

Answer 1

从 class 中删除 z-index .dslc-module-front:

.dslc-module-front {
    position: relative;
    /* z-index: 0; */
}

更新

正如 Goose 所提到的，简单地从常见的 class 中删除 z-index 会导致其他问题，这就是为什么您应该向包含下拉菜单的元素添加额外的深度信息。

div#dslc-module-54 {
  z-index: 50;
}

Answer 2

我发现答案在顶部的 table 中，而不是试图将下拉菜单向上推。我看到了这段代码。

.dslc-module-front {
    position: relative;
    z-index: 0;
}

您可以注释掉 z-index 来解决问题，但是这个 class 也用于其他地方，例如徽标。

删除 #dslc-module-20 元素的 class 应该可以解决问题。

您还应该检查这可能导致的任何意外问题。

下拉菜单 z-index

Drodown menu z-index

html

css

z-index