When I tried using a z-index of 99 and setting a black background color, I expected the clouds CSS to be hidden behind the #writing-container.
To my surprise, the clouds were visible through the container, but were positioned behind the text. While the text was visible, there seemed to be a clash happening.
Adding a black background-color to my #ph-p-container achieved the desired effect of hiding the cloud behind the black background. However, this logic did not work for the entire #writing-container.
I could separate different black backgrounds for each container, but the outlines of the black rectangles appeared unprofessional.
Is there a way to prevent the clouds from being visible through the entirety of the #writing-container?
https://codepen.io/jake-matthews/pen/wvQMaEO
.page-hero {
background-color: black;
height: 825px;
color: white;
display: flex;
align-items: center;
overflow-x: hidden;
flex-wrap: wrap;
width: 100%;
z-index: 2;
position: relative;
}
#writing-container {
margin-left: 175px;
margin-bottom: 160px;
background-color: black;
position: relative;
/* Add this */
z-index: 99;
/* Add this */
}
#ph-p-container {
width: 60%;
position: relative;
background-color: black;
} ...