时间戳

首页 > 解决方案 > 可以使 z-index 工作，因为它甚至应该使它们是绝对位置

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

问题描述

所以我有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;
}

Circles CSS: div 中的 .circles，在 img 内有圆圈。

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

我只有这两个带有 z-index 的 div，所以我相信这不是堆叠问题，但请告诉我你的想法。

标签： htmlcssz-index

解决方案

看看这是不是你想要的

解决方案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.

推荐阅读