Как сделать чтобы модальное не скрывалось под меню?
Начала разбираться с модальными окнами и появилось 2 проблемы:
1) При уменьшении экрана, когда появляется бургер и ты на него кликаешь, то появляется 2 кнопки, при нажатии на них должно всплывать окно с формой, оно то появляется но находится под меню и его не видно. Как сделать так, чтобы при нажатии например на "Вход" у меня меню бургера исчезало и было видно попап?
2) как увеличить ширину попапа? а то она у меня зависит от ширины input, а width не хочется ставить
Ссылки удалены модератором
Дополнительно:
Ответы:
Вам нужно использовать z-index для обоих элементов, чем меньше индекс, тем "ниже" или "глубже" элемент:
div { z-index: 1 } /* Div выше p */ p { z-index: 0 } |
div { z-index: 1 } /* Div выше p */ p { z-index: 0 }
Убедитесь что вы задаёте ширину после блока, где она установлена, либо используйте оператор !important:
div { width: 200px !important }
z-index
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы модальное окно не скрывалось под меню, можно использовать несколько методов:
1. Задать модальному окну более высокий z-index, чем у меню. Z-index контролирует порядок наложения элементов на странице, чем больше значение z-index, тем выше элемент находится на "слое" страницы. Например, вы можете добавить следующее правило CSS для модального окна:
.modal { z-index: 9999; }
2. Использовать свойство position: fixed для модального окна. Это позволит модальному окну оставаться на месте даже при прокрутке страницы. Например:
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
3. Проверить, не перекрывает ли модальное окно меню из-за своего размера. Убедитесь, что размер модального окна не превышает видимой области страницы, и при необходимости, уменьшите его размер или добавьте прокрутку внутри модального окна.
4. Проверить, нет ли у меню свойства z-index, которое могло бы перекрывать модальное окно. Убедитесь, что у меню нет свойства z-index или установите его значение ниже, чем у модального окна.
Следуя этим рекомендациям, вы сможете сделать так, чтобы модальное окно не скрывалось под меню и было отображено корректно на странице.