我使用bootstrap、CSS和particle.js作为依赖项。自定义CSS文件已经链接到这里。当你应用bootstrap和particle.js时，我的红色生成密码按钮变得不可点击，正如我从chrome开发工具particle.jss中看到的那样，它正在按钮上运行，这就是为什么我不能点击按钮的原因。请建议我如何解决这个问题。
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital@1&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
background:white;
margin-top: 10%;
}
.navbar-dark
{
background-color: #1A237E;
}
#logo
{
max-height: 50px;
max-width: 50px;
}
#content
{
border:2px black ridge;
border-radius: 25px;
margin-bottom: 2%;
}
h1
{
padding-left: 36%;
}
h3
{
padding-left: 34%;
}
#wel
{
margin-left: 6%;
font-family: 'Rowdies', cursive;
}
.align
{
padding-left: 36%;
}
h3,h6
{
font-family: 'Work Sans', sans-serif;
}
#submit-button
{
margin-left: 13%;
;
}
#particles-js
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
z-index: 0;
overflow: hidden;
}
footer
{
margin-top: 3.6%;
background-color: yellow;
color: indigo;
padding-top: 2%;
padding-bottom: 2%;
display: block;
}
#contact
{
text-align: center;
}
.fa-envelope
{
color: indigo;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>strong password generator</title>
<link rel="stylesheet" href="./Depd/bootstrap.min.css">
<link rel="stylesheet" href="./Depd/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="./home.css">
</head>
<body>
<div id="particles-js"></div>
<header>
<nav class="navbar navbar-dark navbar-expand-lg fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#"><img src="./logo.png" alt="logo image" id="logo">Pass Creator</a>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container" id="content">
<div class="row">
<h1 id="wel">WELCOME!!!!</h1>
<p>
<h3>GENERATE A STRONG PASSWORD</h3>
</p>
</div>
<form action="{% url 'password' %}" method="GET">
<div class="form-group row align">
<label class="col-sm-1 col-form-label" for="select-number">
<h6>Length:</h6>
</label>
<div class="col-sm-3 col-12">
<input type="number" name="select-number" min="6" max="20" value="12" selected='selected' placeholder="Length">
</div>
<div class="col-12">
<span>
<label for="UPPER" class="col-form-label">
<h6> UPPER : </h6>
</label>
<input type="checkbox" name="UPPER">
</span>
<span>
<label for="specialcharacter" class="col-form-label">
<h6>SPECIAL CHARACTER : </h6>
</label>
<input TYPE="checkbox" name="specialcharacter">
</span>
<span>
<label for="number" class="col-form-label">
<h6>NUMBER : </h6>
</label>
<input type="checkbox" name="number">
</span>
</div>
<div class="col-12">
<label for="unique" class="col-form-label">
<h6>Don't create this password for other users</h6>
</label>
<input type="checkbox" name="unique">
</div>
<button type="submit" role="button" class="btn btn-danger btn-lg" id="submit-button" href="./final.html">Generate Password</button>
</div>
</form>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-6">
<address>
<h5>Address <i class="fa fa-globe"></i></h5>
<p>Nayapatti, Near Technopolis,Secor V,Bidhannagar, North 24 Parganas, West Bengal, India
</p>
</address>
</div>
<div class="col-6" id="contact">
<span>
<h5>
Contact:
</h5>
</span>
<span>
<a href="mailto:soumalyabhattacharya6@gmail.com"><i class="fa fa-envelope fa-lg"></i></a>
</span>
<span>
<i class="fa fa-facebook fa-lg"></i>
</span>
<span>
<i class="fa fa-twitter fa-lg"></i>
</span>
<span>
<i class="fa fa-github fa-lg"></i>
</span>
</div>
</div>
</div>
</footer>
<script src="./particles.js"></script>
<script src="./app.js"></script>
<script src="./Depd/jquery.slim.min.js"></script>
<script src="./Depd/popper.min.js"></script>
<script src="./Depd/bootstrap.min.js"></script>
</body>
</html>请使用id粒子js设置div的高度。
#particles-js {
height:0;
}
此div为空，与菜单栏重叠。或者，您可以按如下方式更改div的位置。
#particles-js {
position: relative;
}
基本上在particle.js上添加绝对位置，这样它就绝对落后于作为背景的位置。并添加相对于包含数据的容器的位置，使其相对于particle.js层浮动。
#content
{
border:2px black ridge;
border-radius: 25px;
margin-bottom: 2%;
position: relative;
}
#particles-js
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
z-index: 0;
overflow: hidden;
}