Переполнение скрыто: скрывает контейнер с абсолютным позиционированием ⇐ CSS

[Anonymous]

Я интегрирую различные сторонние веб-компоненты, и основная проблема, с которой я сталкиваюсь, заключается в том, что если родительский или больший родительский элемент имеет относительное позиционирование и к нему применяется скрытое переполнение, и у него есть прямой или косвенный дочерний элемент с абсолютным позиционированием, затем этот элемент с абсолютным позиционированием обрезается из-за скрытого свойства переполнения.
Я создал аналогичный вариант использования, который вы можете применить и протестировать.
< strong>Вот структура HTML, JavaScript и CSS

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

body{
padding: 25px;
}
.relative-container {
background-color: brown;
overflow: hidden;
position: relative;
color: white;
}
.relative-menu {
position: relative;
}
.long-text {
white-space: nowrap;
}
.menu {
position:absolute;
top:10px;
left:-30px;
background-color: green;
z-index: 99999;
}
.menu.hide {
display:none;
}

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

Hello World!
[*]




There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.



Open Menu


Menu Item 1
[*]Menu Item 2
[*]Menu Item 3





function toggleMenu() {
const menu = document.querySelector(".menu");
if (menu) {
if (menu.classList.contains('show')) {
menu.classList.remove('show');
menu.classList.add('hide');
}
else {
menu.classList.remove('hide');
menu.classList.add('show');
}
}

}

После сохранения переполнения: скрыто в .relative-container< /code> вывод:


If мы удаляем overflow:hidden, тогда меню выглядит нормально, но горизонтальная прокрутка происходит из-за длинного текста, как показано:
[img]https://i.sstatic .net/vvBHvGo7.png[/img]

Ожидаемый Вывод: после удаления переполнения: скрыто, меню должно отображаться снаружи только в левом нижнем углу, как показано на втором снимке экрана. /code> но горизонтальная прокрутка не должна появиться. И, пожалуйста, ПРИМЕЧАНИЕ: это пример примера, а не реальный вариант использования. Поэтому вы должны предположить, что я не могу изменить правило CSS для классов .relative-container и .long-text.

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