Вообще не понимаю, у меня у 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>
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;
}
Как это вообще работает?
Простой
