Html 如何使此红色按钮可单击

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

@导入url（'https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap'）；
@导入url（'https://fonts.googleapis.com/css2?family=Work+SAN:ital@1&显示=交换'；
*
{
保证金：0；
填充：0；
框大小：边框框；
}
身体
{
背景：白色；
利润率最高：10%；
}
.导航栏暗
{
背景色：#1A237E；
}
#标志
{
最大高度：50px；
最大宽度：50px；
}
#内容
{
边框：2个黑脊；
边界半径：25px；
利润底部：2%；
}
h1
{
左：36%；
}
h3
{
左：34%；
}
#好的
{
左缘：6%；
字体系列：“Rowdies”，草书；
}
排列
{
左：36%；
}
h3，h6
{
字体系列：“无衬线工作”，无衬线；
}
#提交按钮
{
左边缘：13%；
;
}
#粒子js
{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-webkit透视图：1000；
前景：1 000；
排名：0；
底部：0；
右：0；
左：0；
位置：绝对位置；
z指数：0；
溢出：隐藏；
}
页脚
{
利润率最高：3.6%；
背景颜色：黄色；
颜色：靛蓝；
垫面：2%；
垫底：2%；
显示：块；
}
#接触
{
文本对齐：居中；
}
.fa信封
{
颜色：靛蓝；
}

强密码生成器






欢迎

生成强密码

长度：
上：
特殊字符：
编号：
不要为其他用户创建此密码
生成密码

请使用id设置div的高度

#particles-js {
     height:0;
}

此div为空，与菜单栏重叠。 或者您可以按如下方式更改div的位置

#particles-js {
    position: relative;
}

---

请使用id设置div的高度

#particles-js {
     height:0;
}

此div为空，与菜单栏重叠。 或者您可以按如下方式更改div的位置

#particles-js {
    position: relative;
}

---

基本上，在particle.js上将位置添加为绝对位置，使其绝对位于用作背景的后面。并添加相对于包含数据的容器的位置，使其相对于particle.js层浮动

#内容
{
边框：2个黑脊；
边界半径：25px；
利润底部：2%；
位置：相对位置；
}
#粒子js
{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-webkit透视图：1000；
前景：1 000；
排名：0；
底部：0；
右：0；
左：0；
位置：绝对位置；
z指数：0；
溢出：隐藏；
}

基本上在particle.js上将位置添加为绝对位置，使其绝对位于用作背景的后面。并添加相对于包含数据的容器的位置，使其相对于particle.js层浮动

#内容
{
边框：2个黑脊；
边界半径：25px；
利润底部：2%；
位置：相对位置；
}
#粒子js
{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-webkit透视图：1000；
前景：1 000；
排名：0；
底部：0；
右：0；
左：0；
位置：绝对位置；
z指数：0；
溢出：隐藏；
}

尝试将

z-index

添加到

.container

。我猜是因为您的代码没有正确显示。很抱歉，di您的解决方案不起作用。请尝试将

#particles js

z-index更改为

-1

。我有一个项目，我不得不使用particle.js，并且遇到了类似的问题。我不确定，但似乎粒子分割始终保持在顶部。我在下面添加了我的解决方案。我实际上将particle.js位置设置为绝对，将包含数据的容器设置为position=relative。这个简单的技巧对我很有效。很高兴你得到了排序。快乐编码！尝试添加