Абсолютно позиционированный контейнер скрывает содержимое за пределами экрана

Question

Я получил список предметов, и без position: absolute они отображаются правильно, как это:

Теперь я хочу установитьposition: absolute, чтобы поместить мой контейнер поверх заголовка (где написано "Sablier").

Тем не менее, он скрывает элементы, которые находятся под экраном:

Я установил z-index: 1000; на контейнер и убедился, что на нем нет другого контейнера. Что не так?

Примечания:

1. Это происходит только на iOS.
2. Я не хочу устанавливать bottom: 0, поскольку список может расширяться за пределы экранавысота.

Answer 1

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

Answer 2

если вы добавляете абсолютную позицию в заголовок и хотите его видеть, вы должны добавить верхний отступ для списка по высоте заголовка. Почему вы добавляете абсолютную позицию для заголовка? Может быть, вам нужна фиксированная позиция?