为什么在bootstrap中使用particles.js以这种方式定位绝对工作？

Question

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

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

如果是这样，为什么about.js不会与导航元素重叠（它是静态的！）？ 为什么它重叠了particles.js（这就是我试图实现的目标）。

现在，如果将id为id.js的div放在div类约为div的顶部，则about与Portfolio部分重叠。 有人可以解释吗？

这是我的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部分与粒子部分重叠，您想要从.about删除position: absolute规则。 该规则是从流块定位的元素中取出.about并使之重叠。

同样，导航元素不会与.about部分重叠。 导航元素的颜色是透明的，并使其以这种方式显示。 尝试将background-color: white规则添加到导航元素。