為什么在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規則添加到導航元素。