为什么绝对位置在 bootstrap 中与 keywords.js 一起工作？

Question

我试图理解为什么绝对位置在元素上的工作方式如此。

我知道具有绝对位置的元素是相对于其第一个定位的（非静态）祖先元素定位的。在本例中，它将是 body 元素。

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

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

这是我的 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

规则添加到导航元素。