Drodown menu z-index

Я работаю над этим website, и, как вы можете видеть, нажав на синие кнопки над столом, появится выпадающее меню.Drodown menu z-index

Как вы можете также видеть, выпадающее меню отображается за столом 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>

источник

2016-09-20 Picademmerda

Это сложный вопрос. Возможно, вы захотите удалить весь код, который не требуется для репликации в вашем ответе, а также включить соответствующий CSS. – Goose

'.dslc-module-front', кажется, проблема. Кажется, исправить эту проблему, но вызвать другие проблемы, если вы удалите позицию или z-индекс. – Goose

@Picademmerda благодарит за принятие моего решения! И кстати. красивый дизайн, который вы создали! ** thumbs up ** – SaschaM78

Снимите Z-индекс от класса .dslc-module-front:

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

Update

Как упомянуто гусь, просто удалив z-index из общего класса причин другие проблемы, поэтому вы должны добавить дополнительную информацию о глубине к элементу, содержащему выпадающие списки.

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

источник

2016-09-20 14:34:06 SaschaM78

Это нарушает другие части сайта. Посмотрите на логотип, когда вы это сделаете. – Goose

Этот новый спецификатор все еще не является достаточно конкретным, поскольку это правило по-прежнему применяется как к родительскому устройству, так и к логотипу. Мне кажется, класс можно полностью удалить без неожиданных результатов. – Goose

Вопросник уже изменил страницу, и теперь проблема устранена, поэтому мы больше не можем реплицировать проблему. Давайте подождем и посмотрим, что изменилось, чтобы избавиться от проблемы. Если идентификатор используется более одного раза на странице, его следует переписать, чтобы не использовать дубликаты идентификаторов. – SaschaM78

Я обнаружил, что ответ находится в таблице сверху, не пытаясь выдвинуть выпадающее меню вверх. Я видел этот код.

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

Вы можете закомментировать Z-индекс, чтобы решить проблему, однако этот класс также используется в других местах, таких как логотип.

Удаление этого класса для элемента #dslc-module-20 должно устранить проблему.

Вы также должны проверить любые непредвиденные проблемы, которые могут возникнуть.

источник

2016-09-20 14:36:09 Goose

ответ

Смежные вопросы