I successfully managed to make one div expand to the size of the window, filling the screen completely. However, I am facing an issue where the other divs are overlapping each other and only displaying thing 3. How can I ensure that they do not overlap and allow me to scroll through each one in order while keeping the text centered in each div?
My goal is to achieve:
Below is the annotated CSS:
/* Styling for each individual div with unique backgrounds */
#thing1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: blue;
}
#thing2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: red;
}
#thing3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: green;
}
/* Centering the text in the div */
#text {
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}