Как сделать чтоб выпадающий дропдаун не обрезался в блоке с overlfow: auto и максимальной высотой?

Question

[serdev5578]

Есть блок с максимальной высотой и overflow: auto внутри и в нем список с итемами в которых есть кнопка которая при клике открывает дропдаун с фиксированной высотой, у дропдауна position: absolute; right: 0; top: 100%; .
Проблема в том что блок который обрезается обрезает также дропдаун когда блок проскроллен в самый вниз. Как правильно написать условие на JS чтоб дропдаун понимал когда нужно менять top значение в тот момент когда он может обрезаться хотя бы частично из-за обрезаного блока родителя?

Answer 1

[strelok011]

Чтобы не кропало - релативный блок должен находиться за пределами оверфлоу.

Решение - дропдаун класть в тело документа за пределами родительского блока, писать муторную обвязку на js с вычислением координат порождающего элемента на экране, по ид вычислять что класть в этот пустой дропдаун, либо искать такой дропдаун в готовых библиотеках, лет 5 назад натыкался на такое готовое.
Либо примерно ту же муть с вычислением позиционирования но с оберткой вокруг вашего блока с оверфлоу и без выноса дропдауна.

<div style="position:relative">
    <div style="width:280px; height: 100px; border:1px solid red; overflow:hidden; ">
        <ul>
            <li style="/* removed position:relative; */ width:200px; height:50px; list-style-type:none; background:yellow;z-index: 3;">
                <div style="position: absolute; top: 30px; left: 52px; width:180px; height:150px; background:Pink; z-index: 99;">
                    <br>
                </div>
            </li>
        </ul>
    </div>
</div>

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