Почему позиционирование слоев работает не правильно?

Question

[KralisV]

Господа, у меня есть элемент - обертка для формы, под которую необходимо подсунуть другой элемент. Делал я это через псевдоэлемент, но по какой-то причине свойство 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>

.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;
        }

Comments

[imko]

Правильно все работает, псевдо в родителе живет. z-index относительный а не абсолютный

[KralisV]

imko, благодарю

[Ankhena]

KralisV,

Почему позиционирование слоев работает не правильно?

Оно работает правильно.
Чтобы понять как именно оно работает, гуглите "css контекст наложения", там полно источников, выбирайте, который любите.

[KralisV]

Ankhena, Спасибо, разобрался