如何使这个红色按钮可点击

Question

我正在使用 bootstrap、CSS、particle.js 作为我的依赖项。自定义 CSS 文件已链接到此处。当您应用 bootstrap 和 particle.js 时，我的红色生成密码按钮变得不可点击，正如我从 chrome 开发工具中看到的 particle.js 是运行在按钮上，那是为什么我不能点击按钮请建议我如何解决这个问题。

@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>
                    &nbsp; &nbsp;
                    <span>
                        <label for="specialcharacter" class="col-form-label">
                            <h6>SPECIAL CHARACTER : </h6>
                        </label>
                        <input TYPE="checkbox" name="specialcharacter">
                    </span>
                    &nbsp;&nbsp;
                    <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>

Answer 1

请使用 id particles-js 设置 div 的高度。

#particles-js {
     height:0;
}

这个 div 是空的并且与菜单栏重叠。或者您可以按如下方式更改 div 的位置。

#particles-js {
    position: relative;
}

Answer 2

基本上在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;
}

如何使这个红色按钮可点击

How to make this red button clickable

html

css

twitter-bootstrap

particles.js

bootstrap-4