I'm trying to understand the logic behind why position absolute behaves the way it does when applied to elements.
From my understanding, an element with position absolute is supposed to be positioned relative to its first parent element that has a position other than static. In this case, that would be the body element.
However, I am puzzled as to why about.js does not overlap with the navigation element (which has a static position), but instead overlaps with particles.js (which was unintentional).
Furthermore, when I place the div with id particles.js on top of the div with class about, the about section ends up overlapping with the portfolio section. Can anyone shed some light on this situation?
Below is a snippet of my CSS code:
* {
box-sizing: border-box;
}
img[alt="Profile Picture"] {
width: 40%;
}
/* Not sure why this works */
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;
}
Any insights would be greatly appreciated!