javascript - 为什么绝对位置在 bootstrap 中与particle.js 以这种方式工作？

Question

我试图理解为什么绝对位置在这种情况下对元素的工作方式。

我知道具有绝对位置的元素相对于它的第一个定位（非静态）祖先元素定位。在这种情况下，它将是 body 元素。

如果是这样的话，为什么 about.js 不与导航元素重叠（它是静态的！）？为什么它与particles.js 重叠（这是我想要实现的）。

现在，如果您将 id 为particle.js 的 div 放在类 about 的 div 之上，那么 about 与投资组合部分重叠。有人可以解释一下吗？

这是我的 JS 小提琴： https ://jsfiddle.net/apasric4/ojnx2Lt7/1/

这是我的 CSS 示例：

* {
  box-sizing: border-box;
}
img[alt="Profile Picture"] {
  width: 40%;
}
/* why do this work idk */
img {
  width: 200px;
  height: 200px;
}

.about {
  position: absolute; 
  border: 10px pink solid;
  z-index: 1;
  height: 100vh;
  width: 100vw;
}
#particles-js {
  background: rgb(29, 114, 243);
  height: 100vh;
  width: 100vw;
}

谢谢

Answer 1

为防止 about 部分与粒子部分重叠，您需要从 中删除position: absolute规则.about。该规则.about从流块中取出定位元素并使其重叠。

此外，导航元素没有被该.about部分重叠。导航元素的颜色是透明的，并以这种方式显示。尝试将background-color: white规则添加到导航元素。