Why does my second div element overlap my first? - html

Question

When I create a new div, the second one, whether it be an image or text. It overlaps the first div container. I figured it may be something to do with the display: flex;, but I'm not sure. Also I am super new so sorry if this is elementary.
* {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
}
.container {
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.container li {
display: inline;
text-decoration: underline;
justify-content: flex-end;
margin-right: 20px;
}
.header-image {
height: 50px;
margin-left: 10px;
}
.container li:hover {
text-decoration: none;
cursor: pointer;
color: darkgray;
}
<div class="container">
<img class="header-image"
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
<div>
<p>Hello</p>
</div>
Thank you.

Answer 1

It's because your container has positioned: fixed; assigned to it. If you add a margin to your second div and apply top: 0 to your container you can push it down without affecting your container element like below:
* {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
}
.container {
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
top: 0rem; /* force container to the top of the page */
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.container li {
display: inline;
text-decoration: underline;
justify-content: flex-end;
margin-right: 20px;
}
.header-image {
height: 50px;
margin-left: 10px;
}
.container li:hover {
text-decoration: none;
cursor: pointer;
color: darkgray;
}
div:nth-of-type( 2 ) {
margin-top: 4rem; /*give the second div top margin to push it down */
}
<div class="container">
<img class="header-image"
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
<div>
<p>Hello</p>
</div>

Answer 2

just remove position: fixed form .container or if you wants it to be fixed you can add z-index: 1

Answer 3

Your second div ('Hello' block) overlaps first div(header container), because first div has position: fixed style.
When you apply position: fixed or position: absolute to element, the element is become removed from the normal document flow, and no space is created for the element in the page layout(https://developer.mozilla.org/en-US/docs/Web/CSS/position).
Since div is removed from document flow it doesn't take any space in document, imagine that div is flying on another separate layer.
If you want to keep position: fixed property you need to compensate it's height by applying:
padding-top: 69px to div's parent -> body.
and
top: 0 to .container to make header stick to the top of the screen;
This way all next elements will have right position from beginning and you will not need to offset each of them.
* {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
}
/* HERE */
body {
padding-top: 69px;
}
.container {
height: 69px;
border-bottom: 1px solid seashell;
/* HERE */
top: 0;
position: fixed;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.container li {
display: inline;
text-decoration: underline;
justify-content: flex-end;
margin-right: 20px;
}
.header-image {
height: 50px;
margin-left: 10px;
}
.container li:hover {
text-decoration: none;
cursor: pointer;
color: darkgray;
}
<div class="container">
<img class="header-image"
src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
<div>
<p>Hello</p>
</div>
<div>
<p>Second Hello</p>
</div>