下拉菜单z-index

Question

i am working on this website and as you can see, by clicking on the blue buttons over the table, a dropdown menu appear.

As you can also can see the dropdown menu is displayed behind the table thead . How can i fix it?

I want to place the dropdown menu over the table thead.

Thanks in advice.

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

Remove the z-index from class .dslc-module-front :

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

Update

As mentioned by Goose, simply removing the z-index from a common class causes other problems, that's why you should add an additional depth info to the element containing the dropdowns.

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

Answer 2

I found that the answer is in the table that's on top, not trying to push the dropdown upwards. I saw this code.

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

You could comment out the z-index to fix the issue, however this class is also used other places, such as the logo.

Removing this class for the #dslc-module-20 element should fix the issue.

You should also check for any unexpected issues this might cause.