To summarize, I created a container div (parent) with a relative position and then added 3 children divs with absolute positions. Now, I am attempting to add another div that should appear below all of this content, essentially representing the next section of a website. However, the next div is currently displaying under the first main "parent" div. Despite my efforts in researching on here and Google, I found that using a main div with a relative position was meant to maintain the flow, but it seems to have caused issues - hence why I'm seeking help.
My intention is to introduce another div outside of the parent so that it will be positioned below the initial div, creating a smooth-scrolling website experience. Please review my CSS code and assist me in understanding why the absolute elements within a relative element are disrupting the layout. (As someone new to CSS, any professional guidance is highly valued!)
Check out this image of the website for context
*{
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: 'Noto Sans HK', sans-serif;
}
/* Arranging the parent and child elements so
images can overlap */
.child {
top: 0;
}
.child-1 {
position: absolute;
left: 0;
z-index: 100;
}
.child-2 {
position: absolute;
right: 0;
z-index: 1;
}
.child-3 {
position: absolute;
padding-top: 38%;
left: 0;
}
#parent {
position: relative;
height: auto;
}
.hero-text {
position: absolute;
text-align: center;
right: 10vw;
top: 28vw;
z-index: 9;
font-size: 3.5vw;
float: right;
color: white;
}
/* Responsive viewport area,
Logo resize based on the screen size */
#logo_png {
max-width: 25vw;
}
#hero_img {
max-width: 85vw;
}
#green_circle_png {
max-width: 40vw;
}
/* NAV BAR STYLING */
#container {
position: absolute;
z-index: 900;
width: 95%;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 5vw; /* margin-left obly touches the left margin, not L & R */
padding-top: 25px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 1.4vw;
}
nav a:hover {
color: black;
}
.p1 {
color: #f5f7ff;
font-size: 10vw;
}
#test {
position: relative;
}<body>
&mt;<br id="quot;"></div>
"child-1">
<h1>
<a href='THIS WILL BE LINK TO HOME PAGE'>
<img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists"/>
</a>
</h1>
</div>
<div class="child child-2">
<h1>
<img id="hero_img" src="Images/circle_hands_lbsphoto.png" alt="Little Big Scientists"/>
</h1>
</div>
<div class="child child-3">
<h1>
<img id="green_
circle_png" src="Images/green_circle_lbswebsite.png" alt="Little Big Scientists"/>
</h1>
</div>
<div class="hero-text">
<p>We’re on a mission to teach,
<br>guide, and empower the next
<br> generation of scientists
</p>
</div>
<!-- Div for Nav Bar-->
<div id="container">
<nav>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div id="test">
<h2 class="p1">Inspiring Education</h2>
</div>
<h2 class="p1">HELP MEEEE</h2>
</body>