Javascript 如何在不覆盖主体的情况下在动画主体上方放置div_Javascript_Html_Css

Javascript 如何在不覆盖主体的情况下在动画主体上方放置div

javascript html css

Javascript 如何在不覆盖主体的情况下在动画主体上方放置div,javascript,html,css,Javascript,Html,Css,我有一个网站，我正在努力掌握如何使用HTML、CSS和JS构建网站。我遇到了一个错误，当我在身体上的背景动画上方放置一个div时，背景动画没有通过div。我不知道如何解决这个问题，我的互联网搜索似乎也没有解决这个问题以下是程序的代码笔： HTML文件如下所示： <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <t

我有一个网站，我正在努力掌握如何使用HTML、CSS和JS构建网站。我遇到了一个错误，当我在身体上的背景动画上方放置一个div时，背景动画没有通过div。我不知道如何解决这个问题，我的互联网搜索似乎也没有解决这个问题

以下是程序的代码笔：

HTML文件如下所示：

<!DOCTYPE html>
<html lang="en" >
<head>

  <meta charset="UTF-8">
  <title>Data</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="wrapper fade-in" id="particles-js">
    <table class="center-table">
      <tr>
        <td><img class="resize" src="Images/Facebook.png" alt="Facebook"></td>
        <td><img class="resize" src="Images/Instagram.png" alt="Instagram"></td>
        <td><img class="resize" src="Images/Snapchat.png" alt="Snapchat"></td>
        <td><img class="resize" src="Images/Twitter.png" alt="Twitter"></td>
        <td><img class="resize" src="Images/YouTube.png" alt="YouTube"></td>
      </tr>
      <tr>
        <br>
        <br>
        <td><img class="resize" src="Images/TikTok.png" alt="TikTok"></td>
        <td><img class="resize2" src="Images/Google2.png" alt="Google"></td>
        <td><img class="resize" src="Images/Venmo2.png" alt="Venmo"></td>
        <td><img class="resize" src="Images/Reddit2.png" alt="Reddit"></td>
        <td><img class="resize" src="Images/LinkedIn.png" alt="LinkedIn"></td>
      </tr>
    </table>
  </div>
  <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="./script.js"></script>
</body>
</html>


资料

JS/CSS文件在代码笔上，但我不认为它们是问题所在

这些图片不会显示，因为我没有将它们添加到项目中

另外，还有一个小提示：如何使这个div对象垂直居中？它已经水平居中。

使用开发工具查看元素的结束位置。然后使用绝对定位和适当的z索引创建覆盖

在您的示例中，只要

.center table{position:absolute}

就可以成为您的目标

至于你关于垂直对齐的第二个问题，我建议你考虑使用flexbox进行布局。

particlesJS（“particlesJS”{
粒子：{
编号：{value:80，密度：{enable:true，value\u area:800}，
颜色：{value:#ffffff}，
形状：{
类型：“圆圈”，
笔划：{宽度：0，颜色：#000000}，
多边形：{nb_边：5}，
图片：{src:“img/github.svg”，宽：100，高：100}
},
不透明度：{
数值：0.2，
随机：错，
动画：{enable:false，speed:1，opacity\u min:0.1，sync:false}
},
尺寸：{
价值：3，
是的，
动画：{enable:false，speed:40，size\u min:0.1，sync:false}
},
行链接：{
启用：对，
距离：150，
颜色：“ffffff”，
不透明度：0.4，
宽度：1
},
移动：{
启用：对，
速度:6,，
指示：“无”，
随机：错，
直：错，
输出模式：“输出”，
反弹：错，
吸引：{enable:false，rotateX:600，rotateY:1200}
}
},
互动性：{
在“画布”上检测_，
活动：{
onhover:{enable:true，模式：[“排斥”，“气泡”]}，
onclick:{enable:true，mode:“push”}，
调整大小：true
},
模式：{
抓取：{距离：400，线链接：{不透明度：1}}，
气泡：{距离：400，大小：40，持续时间：2，不透明度：8，速度：3}，
排斥：{距离：200，持续时间：0.4}，
推：{particles_nb:4}，
移除：{particles_nb:2}
}
},
视网膜检测：正确
});
变量计数\u粒子、统计数据、更新；
统计数据=新统计数据（）；
stats.setMode（0）；
stats.domElement.style.position=“绝对”；
stats.domeElement.style.left=“0px”；
stats.domElement.style.top=“0px”；
document.body.appendChild（stats.domeElement）；
count_particles=document.querySelector（“.js count particles”）；
更新=函数（）{
stats.begin（）；
stats.end（）；
if（window.pJSDom[0].pJS.particles&&window.pJSDom[0].pJS.particles.array）{
count_particles.innerText=window.pJSDom[0].pJS.particles.array.length；
}
requestAnimationFrame（更新）；
};
requestAnimationFrame（更新）





尝试将z-index:-1
添加到div.@barhat或z-index没有任何更改，还有其他想法吗？谢谢！，这允许动画处于背景中。把桌子放在左边