Я пытаюсь воссоздать замораживание ячеек, как в любой популярной программе для работы с электронными таблицами. Кроме того, каждая ячейка может иметь раскрывающийся список с раскрывающимся списком, который должен отображаться для выбора параметра. позиция. Когда я использую это раскрывающееся меню в замороженной части (которая имеет 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>