可以使 z-index 工作，因为它甚至应该是绝对位置

Question

所以我有 2 个元素，圆圈应该是 z-index: -999;所以它们是 100% 在后台，第二个元素是登录表单，它应该是 z-index 999。但是即使它们是绝对位置，z-index 似乎也没有生效。因为我使用的是烧瓶，所以我尝试加入文件而不是让烧瓶将 circles.html 加载到 login.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 in div 里面有 img with the circles.

.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 问题。

可以使 z-index 工作，因为它甚至应该是绝对位置

Can make z-index work as it should even dough they are position absolute

html

css

z-index