后台正在阻止我的登录表单写入ID密码

请在记事本中使用以下代码并保存为html以查看输出。有一个登录表单和一个动画背景。添加背景后，我无法单击用户名框，也无法在其中写入任何内容。尝试更改CSS中的位置。但这并没有发生。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> html,
body {
height: 100%;
margin: 0;
background: rgb(2, 0, 36);
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(149, 199, 20, 1) 0%, rgba(0, 212, 255, 1) 96%);
}
.myForm {
background-color: rgba(0, 0, 0, 0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input {
position: fixed;
border-radius: 0 15px 15px 0 !important;
}
input:focus {
outline: none;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.br-15 {
border-radius: 15px 0 0 15px !important;
}
.submit_btn {
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index: 1;
}
</style> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <dvi class="container h-200"> <div class="d-flex justify-content-center"> <div class="card mt-5 col-md-4 animated bounceInDown myForm"> <div class="card-header"> <center> <h5>Admin Portal</h5> </center> </div> <form> <div class="card-body"> <div id="dynamic_container"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-user"></i></span> </div> <input type="text" placeholder="Login ID" class="form-control"/> </div> <div class="input-group mt-3"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-key"></i></span> </div> <input type="password" placeholder="Login Password" class="form-control"/> </div> </div> </div> <div class="card-footer"><center> <button class="btn btn-success btn-lg submit_btn"> <i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center> </div> </form> </div> </div> </dvi> <div id="particles-js"></div> <script type="text/javascript"> $.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function() {
particlesJS('particles-js', {
"particles": {
"number": {
"value": 80, "density": {
"enable": true, "value_area": 800
}
}
, "color": {
"value": "#ffffff"
}
, "shape": {
"type": "circle", "stroke": {
"width": 0, "color": "#000000"
}
, "polygon": {
"nb_sides": 6
}
, "image": {
"width": 100, "height": 100
}
}
, "opacity": {
"value": 0.5, "random": false, "anim": {
"enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
}
}
, "size": {
"value": 5, "random": true, "anim": {
"enable": false, "speed": 40, "size_min": 0.1, "sync": false
}
}
, "line_linked": {
"enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
}
, "move": {
"enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": {
"enable": false, "rotateX": 600, "rotateY": 1200
}
}
}
, "interactivity": {
"detect_on": "canvas", "events": {
"onhover": {
"enable": true, "mode": "repulse"
}
, "onclick": {
"enable": true, "mode": "push"
}
, "resize": true
}
, "modes": {
"grab": {
"distance": 400, "line_linked": {
"opacity": 1
}
}
, "bubble": {
"distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3
}
, "repulse": {
"distance": 200
}
, "push": {
"particles_nb": 4
}
, "remove": {
"particles_nb": 2
}
}
}
, "retina_detect": true, "config_demo": {
"hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover"
}
}
);
}
);
</script>

将dvi替换为div的标记名第72行时出错。

只需将#particles-js中的z-index更改为0并添加类：

.container {
position: relative;
z-index: 1;
}

只需添加样式：

.card  {
z-index: 33;
}

因为输入是在画布后面呈现的。

.card 
{
z-index: 33;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input{
position: fixed;
border-radius:0 15px 15px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
.br-15{
border-radius: 15px 0 0 15px !important;
}
.submit_btn{
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index:1;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<dvi class="container h-200">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<center>
<h5>Admin Portal</h5>
</center>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user"></i></span>
</div>
<input type="text" placeholder="Login ID" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-key"></i></span>
</div>
<input type="password" placeholder="Login Password" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer"><center>
<button class="btn btn-success btn-lg submit_btn">
<i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center>
</div>
</form>
</div>
</div>
</dvi>
<div id="particles-js"></div>
<script type="text/javascript">
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
});

</script>
</body>
</html>
</body>
</html>

替换此行

<div class="card mt-5 col-md-4 animated bounceInDown myForm" >

使用这条线路

<div class="card mt-5 col-md-4 animated bounceInDown myForm" style="z-index: 999999;">

我已经在浏览器上测试了您的HTML代码，并通过在样式标记中添加几行CSS解决了您的问题。问题是z指数

.d-flex.justify-content-center {
position: relative;
z-index: 9999 !important;
}

你可以在你的样式标签中添加这个css，你的问题就解决了

无需管理z索引。只需移除#particles-jscss中的z-index:1，并将整个<dvi>块移动到<div id="particles-js"></div>下方

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input{
position: fixed;
border-radius:0 15px 15px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;

}
.br-15{
border-radius: 15px 0 0 15px !important;
}
.submit_btn{
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div id="particles-js"></div>
<dvi class="container h-200">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<center>
<h5>Admin Portal</h5>
</center>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user"></i></span>
</div>
<input type="text" placeholder="Login ID" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-key"></i></span>
</div>
<input type="password" placeholder="Login Password" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer"><center>
<button class="btn btn-success btn-lg submit_btn">
<i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center>
</div>
</form>
</div>
</div>
</dvi>
<script type="text/javascript">
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
});



</script>
</body>
</html>
</body>
</html>

相关内容

最新更新

热门标签：