下拉菜單z-index

Question

我正在該網站上工作，如您所見，通過單擊表格上方的藍色按鈕，將顯示一個下拉菜單。

您還可以看到在thead后面顯示了下拉菜單。 我該如何解決？

我想將下拉菜單放在表格thead上。

感謝您的建議。

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

從類.dslc-module-front刪除z-index：

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

更新

正如Goose所提到的，僅從通用類中刪除z-index會導致其他問題，這就是為什么您應該向包含下拉菜單的元素中添加其他深度信息。

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

Answer 2

我發現答案在最上面的表格中，而不是試圖將下拉列表向上推。 我看到了這段代碼。

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

您可以注釋掉z-index來解決此問題，但是此類也用於其他地方，例如徽標。

刪除#dslc-module-20元素的#dslc-module-20應解決此問題。

您還應該檢查可能引起的任何意外問題。