Отрицательная абсолютная позиция CSS внутри прокручиваемого контейнера ⇐ CSS

[Anonymous]

Я работаю над редактором с возможностью перетаскивания, в котором пользователи могут добавлять поле редактора. В поле редактора пользователи могут размещать перетаскиваемые, перемещаемые элементы, каждый элемент имеет определенное положение, а при наведении курсора над элементом появляется информационная метка. (с использованием позиции: Absolute с отрицательным смещением). Эта настройка отлично работает без ограничения переполнения.
Однако, когда я применяю overflow: auto к полю редактора для обработки содержимого, превышающего размер коробки, расположение информационной метки нарушается когда он находится рядом с границами контейнера. вместо полной визуализации метка попадает под контейнер.
Вот пример без переполнения и пример с

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

.editor {
position: relative;
text-align: left;
height: 200px;
width: 100px;
margin: auto;
margin-top: 50px;

}

.editor-box {
position: relative;
height: 100px;
width: 100%;
overflow: auto;
}

.editor-element {
position: relative;
height: 50px;
}

.editor-element-label {
position: absolute;
width: 20px;
height: 20px;
left: 0px;
top: -20px;
background-color: green;
z-index: 1000;
display: none;
}

.editor-element:hover .editor-element-label {
display: block;
}




Element



Element



Element





Element



Element



Element

Есть идеи, как поступить в таком случае

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