Относительно позиционированный элемент внутри липкого родителя покрывается внутри элемента с помощью overflow: scroll - PullRequest
Новая
       31

Относительно позиционированный элемент внутри липкого родителя покрывается внутри элемента с помощью overflow: scroll

1 голос
/ 05 мая 2020

Я пытаюсь воссоздать замораживание ячеек, как в любой популярной программе для работы с электронными таблицами. Кроме того, каждая ячейка может иметь раскрывающийся список с раскрывающимся списком, который должен отображаться для выбора параметра. позиция. Когда я использую это раскрывающееся меню в замороженной части (которая имеет position: sticky), тело «скрывается» внутри области просмотра переполнения. Я попытался отрегулировать это, указав z-index на оболочке, а .cell-content-wrapper и .cell-content безуспешно. Есть ли возможность вынести .cell-content вперед?

Любая помощь приветствуется. 

#wrapper {
    width: 600px;
    min-height: 150px;
    overflow: scroll;
}

.row {
    display: flex;
    width: 100%;
}
.cell {
    display: inline-flex;
    min-width: 70px;
    overflow: hidden;
    border: 1px solid gray;
}
.frozen-part {
    background: lightblue;
    display: flex;
    position: sticky;
    left: 0;
}

.cell-content-wrapper {
    position: absolute;
}
.cell-content {
    position: relative;
    top: 25px;
    width: 100px;
    height: 300px;
    background: #7cfc00;
}
<div id="wrapper">
    <div class="row">
        <div class="frozen-part">
            <div class="cell">Cell</div>
            <div class="cell">Cell</div>
            <div class="cell">
                Dropdown
                <div class="cell-content-wrapper">
                    <div class="cell-content">
                        This should be in front
                    </div>
                </div>
            </div>
            <div id="dropdown"></div>
        </div>

        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
        <div class="cell">
            Dropdown
            <div class="cell-content-wrapper">
                <div class="cell-content">
                    This is a desired behavior
                </div>
            </div>
        </div>
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
</div>
...