Позиция переполнения: абсолютный дочерний элемент с позицией: относительный родительский элемент из переполнения-y: авто ⇐ CSS

[Anonymous]

Я ищу способ сделать это с помощью HTML + CSS. У меня есть прокручиваемый список, где каждый элемент имеет значок рядом с ним, расположенный с позицией: абсолютный, как половина вне контейнера списка. Контейнер списка должен иметь параметр overflow-y: auto, но это делает невозможным переполнение чего-либо за пределами контекста стека.
Я попробовал повысить z-индексацию, не думаю, что позиция: исправлено будет работать, так как мне нужно, чтобы значок следовал за соответствующим элементом, когда пользователь прокручивает список.

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

.overflow-y {
overflow-y: auto;
display: flex;
flex-direction: column;
max-height: 50px;
width: 200px;
}

.absolute {
position: absolute;
top: 0;
right: -5px;
width: 5px;
height: 5px;
background: red;
}

.relative {
position: relative;
height: 100px;
width: 200px;
}

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

list-item



list-item

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