Как показать абсолютно спозиционированный блок поверх блока с прокруткой?
Привет, не знаю, как сформулировать вопрос для гугла, поэтому покажу наглядно. Пример
В блоке с overflow-y: auto, блок .absolute добавляет горизонтальную прокрутку. Мне же нужно, чтобы он показывался поверх, так, как если бы не было прокрутки. overflow-x: visible выглядит, как решение, но почему-то не работает.
Андрей, т.е. вам нужно абсолютом натянуть блок на блок с прокруткой, но чтобы он не прокручивался по х?) Может его вынести перед блоком с прокруткой? И опустить?
Евгений, не совсем понял ваше предложение, поэтому уточню, какая задача у меня стоит.
Есть модалка фиксированной ширины и высоты. Её содержимое может превысить высоту и для этого установлен overflow-y: auto. Однако, внутри этой формы есть самописный select с выпадающим списком с опциями. Выпадающий список абсолютно спозиционирован, при его открытии его границы выходят за границы модалки и таким образом вызывают появление горизонтального скролла. В целом, на codepen я изобразил именно то, что происходит, просто статично.
Мне нужно, чтобы остался скролл, но выпадающий список отрисовывался за границами модалки.
Андрей, угу... но ведь позишн абсолют выбивает из потока? Но т.к.это модалка - то получается селект остается как бы внутри блока а не поверх? Так?) С z-index пробовали поиграться? Селект можно выносить за пределы формы?
Не мне.
Что, если я не могу вынести компонент за пределы overflow? Это отдельный vue компонент, я не могу взять из него абсолютно спозиционированный блок и вынести за overflow, увы. Решение-то логичное, но кейс не тот
Андрей, vue компонент базируется внутри единственного родителя, это вполне вписывается в логику описанную выше, все, что надо — развести данные. Кейс вполне тот.
<template>
<div class="relative">
<div class="overflow">[Содержимое, которое должно скролиться]</div>
<div class="absolute">[Содержимое для абстолютноспозиционированного элемента]</div>
</div>
<template>
