Почему позиционирование слоев работает не правильно?
Господа, у меня есть элемент - обертка для формы, под которую необходимо подсунуть другой элемент. Делал я это через псевдоэлемент, но по какой-то причине свойство z-index сработало не так, как ожидалось, причем при любом значении. Результат на скрине. Бьюсь с этим уже час.
<div class="questions__form-wrapper"> <form class="questions__form"> <input class="questions__name" type="text" placeholder="Имя"> <input class="questions__tel" type="tel" placeholder="Телефон"> <textarea class="questions__comm" placeholder="Комментарии"></textarea> </form> <a class="questions__agreement" href="#">Соглашение о персональных данных</a> </div> |
<div class="questions__form-wrapper"> <form class="questions__form"> <input class="questions__name" type="text" placeholder="Имя"> <input class="questions__tel" type="tel" placeholder="Телефон"> <textarea class="questions__comm" placeholder="Комментарии"></textarea> </form> <a class="questions__agreement" href="#">Соглашение о персональных данных</a> </div>
.questions__form-wrapper{ padding: 45px 45px 30px; background-color: #fff; box-shadow: 0px 4px 40px 0px rgba(7, 17, 51, 0.07); border-radius: 12px; width: 686px; position: relative; z-index: 10; } .questions__form-wrapper::before{ content: ""; position: absolute; width: 318px; height: 590px; background-color: $accent; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -10; } |
.questions__form-wrapper{ padding: 45px 45px 30px; background-color: #fff; box-shadow: 0px 4px 40px 0px rgba(7, 17, 51, 0.07); border-radius: 12px; width: 686px; position: relative; z-index: 10; } .questions__form-wrapper::before{ content: ""; position: absolute; width: 318px; height: 590px; background-color: $accent; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -10; }
Дополнительно:
Правильно все работает, псевдо в родителе живет. z-index относительный а не абсолютный
Почему позиционирование слоев работает не правильно?
Оно работает правильно.
Чтобы понять как именно оно работает, гуглите "css контекст наложения", там полно источников, выбирайте, который любите.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Позиционирование слоев в веб-разработке может работать неправильно по разным причинам. Вот несколько возможных причин и способы их решения:
1. Неправильное использование свойства position:
- Проверьте, что вы правильно указали значение свойства position для каждого слоя (например, static, relative, absolute, fixed).
- Убедитесь, что вложенные слои имеют правильное позиционирование относительно родительского слоя.
2. Неправильное использование свойства z-index:
- Убедитесь, что вы правильно указали значение свойства z-index для каждого слоя, который должен быть показан поверх других слоев.
- Проверьте, что у каждого слоя с указанным z-index также правильно указано значение position, отличное от static.
3. Неправильное использование размеров и отступов:
- Проверьте, что у каждого слоя правильно указаны размеры (width, height) и отступы (margin, padding).
- Убедитесь, что размеры и отступы не перекрывают другие слои.
4. Использование floats:
- Если вы используете float для позиционирования слоев, убедитесь, что вы правильно очистили float, чтобы избежать неправильного позиционирования других элементов.
5. Проблемы с наложением текста:
- Если у вас есть текст на слоях, убедитесь, что правильно настроены отступы и размеры шрифта, чтобы текст не перекрывал другие элементы.
Прежде чем начать исправлять проблему с позиционированием слоев, рекомендуется использовать инструменты разработчика в браузере для анализа стилей и расположения элементов на странице. Также не забывайте тестировать ваш макет на разных устройствах и браузерах, чтобы убедиться, что он отображается корректно.