Почему overflow: hidden; у body так странно влияет на popup-окно?
Вообще не понимаю, у меня у body стоит overflow-x: hidden;(хотя это необязательное свойство, его добавляют на всякий случай) и попап работает как надо, появляется на весь экран, при его вызове не прыгает вверх страницы, когда открыт - не скроллится(хотя по идее должен! и при его открытии для body добавляют класс .fixed-page с overflow: hidden, чтобы сам сайт не скролился под оверлеем)
Но если у body убрать overflow-x: hidden(даже когда прописан .fixed-page), то всё почему то ломается и происходит как на скрине. Не понимаю, как overflow-x: hidden вообще может влиять на отображение класса .popup__main. При чём если у body заменить hidden на clip, то попап всё равно ломается, нужен именно hidden.
<div class="popup__main"> <div class="container"> <div class="popup"> <img src="svg/cross.svg" alt=""> <p>Текст в Окне</p> </div> </div> </div> |
<div class="popup__main"> <div class="container"> <div class="popup"> <img src="svg/cross.svg" alt=""> <p>Текст в Окне</p> </div> </div> </div>
html, body{ height: 100%; width: 100%; font-size: 14px; font-family: Nunito Sans; color: #000; overflow-x: hidden; } body.fixed-page{ } .popup__main{ position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(188, 213, 251, .7); backdrop-filter: blur(1px); display: none; z-index: 102; } .popup{ position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; max-width: 400px; height: 300px; } |
html, body{ height: 100%; width: 100%; font-size: 14px; font-family: Nunito Sans; color: #000; overflow-x: hidden; } body.fixed-page{ } .popup__main{ position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(188, 213, 251, .7); backdrop-filter: blur(1px); display: none; z-index: 102; } .popup{ position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; max-width: 400px; height: 300px; }
Как это вообще работает?
Дополнительно:
хотя это необязательное свойство, его добавляют на всякий случай
1. На body оно не сработает на мобилках.
2. Не нужно его ставить на всякий случай.
Нужно верстать так, чтобы ничего случайно не вываливалось.
Там где оно должно вываливаться, лучше вешать overflow на свою же секцию (или типа того, но не на body)
Бездумный overflow может привести к потери части контента.
Для всего остального сделайте песочницу на codepen.io
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, которую вы описываете, связана с тем, что свойство "overflow: hidden;" применено к элементу . Когда это свойство применяется к элементу , оно скрывает все содержимое, которое выходит за пределы области просмотра. Это может привести к тому, что popup-окно, которое должно быть видимым на странице, также будет скрыто из-за этого свойства.
Чтобы решить эту проблему, вам нужно изменить структуру вашего кода или использовать другие методы стилизации, которые не будут конфликтовать с "overflow: hidden;" на элементе . Например, вы можете создать дополнительный контейнер для popup-окна и применить стили к этому контейнеру, чтобы он оставался видимым независимо от свойства "overflow: hidden;" на элементе .
Пример использования контейнера для popup-окна:
.popup-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border: 1px solid #ccc; z-index: 9999; } <div class="popup-container"> <p>This is a popup window</p> </div>.popup-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border: 1px solid #ccc; z-index: 9999; } <div class="popup-container"> <p>This is a popup window</p> </div>
В этом примере popup-окно будет отображаться поверх другого контента на странице и не будет скрыто из-за свойства "overflow: hidden;" на элементе . Помните, что важно тестировать ваше решение на различных браузерах, чтобы убедиться, что оно работает корректно во всех условиях.