我正在使用具有光泽效果的登录页面，但对（z-indexes）有问题。我根据需要制作了一个具有响应高度的良好覆盖层，因为我有两种不同的形式，但是我无法单击输入或单击链接，但是复选框可以正常工作，我真的不明白。我尝试手动更改它，但是也没有用。我该怎么办，如何使它工作？
/* Login */
#login_box {
width: 640px;
background: inherit;
overflow: hidden;
border-radius: 8px;
max-width: 50%;
z-index: 2;
}
#login_box:before {
content: "";
position: absolute;
top: -25px;
left: -25px;
bottom: -25px;
right: -25px;
background: inherit;
box-shadow: inset 0 0 0 400px rgba(255, 255, 255, 0.3);
filter: blur(800px);
z-index: 0;
}
#login_box form {
text-align: center;
z-index: 2;
}
#login_box input {
border: 0;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
margin: 20px 0;
padding-bottom: 10px;
font-size: 18px;
z-index: 2;
}
#login_box input:focus,
#login_box input:active {
border: 0;
margin-bottom: 22px;
}
#LogRegTab {
border: 0;
}
.box_sub {
font-size: 15pt;
text-align: left;
}
#register form {
width: 80%;
}
.nav-tabs .nav-link {
border: 0 !important;
padding: 5px 10px !important;
margin: 0 !important;
font-size: 15pt;
}
和HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- Scripts (jQuery) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" />
<!-- Tittle -->
<title>Test</title>
</head>
<body>
<main class="container-fluid p-0 m-0">
<section style="background-image: url('https://picsum.photos/1920/1080/?random');">
<div class="container-fluid">
<div class="row justify-content-center mt-5">
<div class="col-xl-4">
<!-- Tab panes -->
<ul class="nav nav-tabs" id="LogRegTab" role="tablist">
<li class="mr-2">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true" onClick="logHeight();">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false" onClick="regHeight();">Register</a>
</li>
</ul>
</div>
</div>
<div class="row justify-content-center">
<div id="login_box" class="col-xl-4 mb-5">
<div class="tab-content" id="LogRegTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form action="" class="mx-auto">
<h1 class="box_header">Login</h1>
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Heslo" required>
<div class="help-block text-right "><a href="">Forget the password ?</a></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-login btn-block">Sign in</button>
</div>
<div class="custom-control custom-checkbox mx-auto">
<input type="checkbox" class="custom-control-input" id="keeplogin">
<label class="custom-control-label" for="keeplogin">keep me logged-in</label>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form action="" class="mx-auto">
<h1 class="box_header pt-4">Register</h1>
<h2 class="box_sub">Kontakní údaje</h2>
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="phone" class="form-control" id="phone" placeholder="Telefon" required>
</div>
<div class="form-group">
<label class="sr-only" for="name">Jméno</label>
<input type="name" class="form-control" id="name" placeholder="Jméno" required>
</div>
<div class="form-group">
<label class="sr-only" for="surname">Příjmení</label>
<input type="surname" class="form-control" id="surname" placeholder="Příjmení" required>
</div>
<h2 class="box_sub">Registrační údaje</h2>
<div class="form-group">
<label class="sr-only" for="username">Uživatelské jméno</label>
<input type="username" class="form-control" id="username" placeholder="Uživatelské jméno" required>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Heslo" required>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Ověření hesla" required>
</div>
<h2 class="box_sub">Fakturační údaje</h2>
<div class="form-group">
<label class="sr-only" for="Streetandnumber">Ulice a č. p.</label>
<input type="Streetandnumber" class="form-control" id="Streetandnumber" placeholder="Ulice a č. p." required>
</div>
<div class="form-group">
<label class="sr-only" for="town">Obec</label>
<input type="town" class="form-control" id="town" placeholder="Obec" required>
</div>
<div class="form-group">
<label class="sr-only" for="PSC">PSČ</label>
<input type="PSC" class="form-control" id="PSC" placeholder="PSČ" required>
<select class="custom-select">
<option value="1">lorem</option>
<option value="2">lorem</option>
<option selected value="3">lorem selected</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-login btn-block">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="js/dropdown_hold.js"></script>
</body>
</html>
最佳答案
伪元素#login_box：before在输入的顶部。如果将其z-index更改为-1，则可以解决问题（至少在chrome和firefox中）。
#login_box:before {
position: absolute;
top: -25px;
left: -25px;
bottom: -25px;
right: -25px;
background: inherit;
box-shadow: inset 0 0 0 400px rgba(255, 255, 255, 0.3);
filter: blur(800px);
z-index: 0;
}
Here is a fiddle.