Попап-форма с абсолютной позицией игнорирует футер и наезжает на него, хотя не игнорирует шапку

Question

Попап-форма с абсолютной позицией игнорирует футер и наезжает на него, хотя не игнорирует шапку

Рейтинг: 0Ответов: 0Опубликовано: 03.03.2023

Всем здравствуйте!

Я бэкендер, поэтому не очень разбираюсь в стилях, но сейчас делаю full-stack проект на Bootstrap-5.

Мой код вертски:

<body class="d-flex flex-column min-vh-100">
    <nav class="navbar navbar-expand-lg navbar-light bg-warning sticky-top">
    ...
    </nav>
    <div class="container position-relative form-imitation-popup-parent py-0">
       <div class="card my-5 box-shadow card-form-popup text-center border-dark px-0"
       ...
       </div>
       ...
    </div>
    <footer class="pt-4 px-2 border-top bg-warning mt-auto">
    ...
    </footer>
</body>

CSS:

.form-imitation-popup-parent {
  min-width: 100%;
  justify-content: center;
  display: flex;
}

.card-form-popup {
  position: absolute;
  z-index: 9;
  max-width: 550px;
}

Блок всплывающей формы заключен в родителя с атрибутом position-relative. Насколько я знаю при таком условии блок с атрибутом position: absolute должен игнорировать только блоки, включенные в родительский и это работает по отношению к шапке navbar. Но на футер форма наезжает на экранах с маленькой высотой.

Подскажите, пожалуйста, как это исправить.

css html bootstrap

Источник: Stack Overflow на русском

Попап-форма с абсолютной позицией игнорирует футер и наезжает на него, хотя не игнорирует шапку

Ответы