Может заставить работать z-index как положено даже тесту, они в абсолютном положении

Question

Итак, у меня есть 2 элемента, точечные круги, которые должны иметь z-индекс: -999; таким образом, они на 100% в фоновом режиме и вторым элементом формы входа в систему, которая должна быть z-index 999. Но даже несмотря на то, что они абсолютно абсолютные, z-index, похоже, не действует. Так как я использую flask, я попытался объединить файлы вместо flask загрузить круги. html для входа в систему. html, но все равно не работает.

Изображение с проблемой :

Логин CSS:

.login-div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    z-index: 999 !important;
}

Круги CSS: .circles в div, который находится внутри img с кругами.

.circles{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -999 !important;
}

У меня есть только эти два div с z-index, поэтому я считаю, что это не проблема с суммированием, но дайте мне знать, что вы думаете.

Answer 1

Посмотрите, хотите ли вы этого

Решение 1:

.circles{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.login-div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: white;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
}

<div class="login-div">
  <h1>Log In</h1>
</div>
<div class="circles">
  <img src="https://glowvarietyshow.com/wp-content/uploads/2017/03/placeholder-image.jpg" alt="Image Test">
</div>

этот z-index: -1; делает элемент позади других элементов.

Решение 2:

.background--page {
    width: 100vw;
    height: 100vh;
    background-position: center;
}

.login-div {
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    width: 200px;
    height: 200px;
}

<div class="background--page" style="background-image: url('https://glowvarietyshow.com/wp-content/uploads/2017/03/placeholder-image.jpg')">
  <div class="login-div">
    <h1>Log In</h1>
  </div>
</div>

Через background-image вам не придется работать с z-index.

Answer 2

Я установил цвет фона на белый, и он работал, так что это не было проблемой z-index.