Открыть раскрывающийся список поверх всего div даже при прокрутке ⇐ CSS

[Anonymous]

у меня есть таблица ниже

Код: Выделить всё

xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx


...

Item 1
Item 2
Item 3
Item 4









Right Side

с приведенным ниже CSS

Код: Выделить всё

  #table-scroll {
height:150px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100px;
}
#table-wrapper table * {
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
width: 150px;
}
.dropdown-content span {
display: block;
height: 30px;
text-wrap: nowrap;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10px;
align-self: stretch;
cursor: pointer;
}
.dropdown:hover .dropdown-content {
display: block;
position: a;
z-index: 100;
}
.dropdown-content span:hover {
background-color: #F2F6F8;
}

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


Я пробовал использовать индекс z и фиксированное положение, но ничего относительного не помогло

Подробнее здесь: https://stackoverflow.com/questions/786 ... -scrolling