раскрывающийся список прячется за div в таблице - PullRequest
Новая
       21

раскрывающийся список прячется за div в таблице

0 голосов
/ 16 февраля 2019

Пожалуйста, обратитесь к изображению ниже

Раскрывающийся список продолжает скрываться за заголовком таблицы

Я проверил прозрачность, z-index и все. Пока ничего не происходит.

Код для раскрывающегося списка (псевдо-раскрывающийся список создается с помощью div: 

.content_dropdown{
    max-height: 120px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-radius: 5px;
    padding: 0px 0px 0px 0px;
    background-color: white;
    box-shadow: 0 0.25em 0.75em rgba(0,0,0,.3);
    border: 1px solid #009cff;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    position: relative;
    width: 100%;
    margin-left: -1px;
    margin-top: -3px;
    max-height: 154px;
}

Код для заголовка таблицы: 

.task_stages_list_view-HEAD{
    border-width: 1px;
    border-color: rgb(230, 231, 235);
    border-style: solid;
    min-height:42px;
    width: 1695px;
    display: block;
    position: sticky;
    top: 0px;
    z-index: 99999;
}

PS: я не хочу удалять позицию: липкий, чтобы сделать раскрывающийся списокнад заголовком таблицы. Есть другие решения?

1 Ответ

0 голосов
/ 16 февраля 2019

Из вашего кода и .content_dropdown, и .task_stages_list_view-HEAD являются позиционированными элементами, вам нужно использовать свойство z-index в обоих селекторах, чтобы дать им стековый контекст, который соответствует тому, что вы действительно хотите в вашем случае, поскольку у вас есть 

.task_stages_list_view-HEAD{
...
z-index: 99999;
...
}

Вам нужно объявить свойство z-index в .content_dropdown, которое будет выше, чем у вас в .task_stages_list_view-HEAD Попробуйте 

.content_dropdown{
...
z-index: 100000;
...
}

, чтобы элемент с .content_dropdown появится ближе к пользователю, так как имеет более высокий z-index и верхний предел .task_stages_list_view-HEAD NB. Любой элемент со значением для z-index ниже, чем 99999, окажется позади .task_stages_list_view-HEAD для пользователя

...