Div moves over other one on diferent device scales - html

Question

So I have this problem, I have Static web page, and i have header section and few others.
But currently right now. Whatever section i set to be under the header section, its just move over the header.
This is first time this is happening, and i cant reslove it.
On first i tought its problem in browser, but it is same on every one that i tried.
I think it is problem in the image on header section so i placed it above the txt section on the header, but section below header stil overlaps on the header.
Soo I double checked all code on header and I think there was nothing wrong that
could cause this.
header {
margin: auto;
height: 100vh;
}
.navigation-menu {
z-index: 10000;
display: flex;
align-items: center;
background: #fff;
box-shadow: 0 1px 1px #333;
justify-content: space-between;
position: fixed;
width: 100%;
left: 0;
top: 0;
padding: 20px 20px;
}
.navigation-menu nav ul {
word-spacing: 10px;
}
.navigation-menu nav ul li {
list-style-type: none;
display: inline-block;
}
.navigation-menu nav ul li a {
font-size: 19px;
}
/*
===== Hamburger Menu =====
*/
.navigation-menu .hamburger {
padding: 5px;
position: relative;
display: none;
cursor: pointer;
right: 40px;
border: none;
background: none;
outline: none;
appearance: none;
}
.navigation-menu .hamburger .bar {
transition: .3s ease all;
position: relative;
display: block;
margin-bottom: 5px;
width: 30px;
height: 3px;
background: #333;
border-radius: 26px;
}
.hamburger.is-active .bar:nth-last-child(1) {
transform: rotate(-45deg) translate(4px, -5px);
}
.hamburger.is-active .bar:nth-last-child(2) {
transform: translateX(-10px);
opacity: 0;
}
.hamburger.is-active .bar:nth-last-child(3) {
transform: rotate(45deg) translate(6px, 8px);
}
.mobile-menu {
transition: .3s ease all;
transform: translateX(100%);
position: fixed;
display: none;
align-items: center;
justify-content: space-around;
left: 0;
top: 0;
width: 100%;
padding-top: 120px;
height: 100vh;
z-index: 2;
background: #fff;
}
.mobile-menu.menu-show {
transform: translateX(0%);
}
.mobile-menu ul {
word-spacing: 10px;
}
.mobile-menu ul li {
list-style-type: none;
}
.mobile-menu ul li a {
font-family: 'Playfair Display', serif;
margin-bottom: 5px;
transition: .3s ease all;
font-size: 45px;
}
.mobile-menu ul li a:hover {
color: red;
}
#media (max-width:533px) {
.navigation-menu nav {
display: none;
}
.navigation-menu .hamburger {
display: block;
}
.mobile-menu {
display: flex;
}
}
/*
===== Hamburger Menu =====
*/
.heading__container {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100vh;
}
.heading__content {
position: relative;
margin: 6%;
display: block;
}
.heading__title h1{
font-weight: 900;
text-transform: uppercase;
font-size: 55px;
}
.heading__title h1 span {
color: red;
}
.heading__subtitle p{
font-size: 22px;
}
.heading__subtitle {
max-width: 600px;
width: 100%;
}
.heading__image {
padding: 1em;
position: relative;
text-align: center;
}
.heading__image img {
max-width: 400px;
width: 100%;
}
.heading__button-box .btn__read {
background: red;
border: solid 1px red;
}
.heading__button-box .btn__read a {
color: #fff;
}
.heading__button-box .btn__react {
position: relative;
}
.heading__button-box .btn__react::before {
position: absolute;
content: '';
left: 0;
bottom: 0;
background: red;
z-index: -1;
height: 0;
transition: .3s ease all;
width: 100%;
}
.heading__button-box .btn__react:hover::before {
height: 100%;
}
.heading__button-box button {
margin-bottom: 1%;
margin-right: 5%;
}
.heading__button-box .btn__react a {
transition: .3s ease all;
}
.heading__button-box .btn__react:hover {
border: solid 1px red;
}
.heading__button-box .btn__react:hover a {
color: #fff;
}
.heading__button-box .btn__react {
border: solid 1px red;
}
.h__wrapper {
margin-top: 50px;
}
.h__wrapper .h__button {
display: inline-block;
overflow: hidden;
height: 60px;
width: 60px;
float: left;
border-radius: 50px;
cursor: pointer;
margin: 10px 5px;
transition: .3s ease all;
box-shadow: 0 2px 12px #333;
}
.h__wrapper .h__button:hover {
width: 200px;
}
.h__wrapper .h__button .icon {
height: 60px;
width: 60px;
transition: .3s ease all;
border-radius: 50px;
text-align: center;
line-height: 60px;
box-sizing: border-box;
display: inline-block;
}
.h__wrapper .h__button .icon i {
font-size: 25px;
line-height: 60px;
}
.h__wrapper .h__button span {
font-size: 20px;
line-height: 60px;
margin-left: 10px;
font-weight: 500;
}
.h__wrapper .h__button:nth-child(1) .icon {
background: #fff;
}
.h__wrapper .h__button:nth-child(1):hover .icon {
background: rgb(126, 168, 245);
}
.h__wrapper .h__button:nth-child(1):hover .icon i{
color: #fff;
}
.h__wrapper .h__button:nth-child(2) .icon {
background: #fff;
}
.h__wrapper .h__button:nth-child(2):hover .icon {
background: rgb(214, 146, 20);
}
.h__wrapper .h__button:nth-child(2):hover .icon i{
color: #fff;
}
.h__wrapper .h__button:nth-child(3) .icon {
background: #fff;
}
.h__wrapper .h__button:nth-child(3):hover .icon {
background: #333;
}
.h__wrapper .h__button:nth-child(3):hover .icon i{
color: #fff;
}
<header>
<div class="navigation-menu">
<img src="../assets/images/logo/Anima.png" alt="">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Works</li>
<li>Projects</li>
</ul>
</nav>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
<nav class="mobile-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>Projects</li>
</ul>
</nav>
<section class="heading__container">
<div class="heading__content">
<div class="heading__title">
<h1><span>Emanuel</span> <br> Rajic</h1>
</div>
<div class="heading__subtitle">
<p>I am 16 years old Front-end developer and CS Student</p>
</div>
<div class="heading__button-box">
<button class="btn__read">Read More</button>
<button class="btn__contact btn__react">Get In Touch</button>
</div>
<div class="h__wrapper">
<div class="h__button">
<div class="icon"><i class="fab fa-twitter"></i></div>
<span>Twitter</span>
</div>
<div class="h__button">
<div class="icon"><i class="fab fa-instagram"></i></div>
<span>Instagram</span>
</div>
<div class="h__button">
<div class="icon"><i class="fab fa-github"></i></div>
<span>Github</span>
</div>
</div>
</div>
<div class="heading__image">
<img src="../assets/images/header/valentin-salja-0aX51h4WvAk-unsplash.jpg">
</div>
</section>
</header>

Answer 1

A combination of z-index:10000, which will give this element priority over everything (so being on top all the time), and position:fixed, which will make that element have a fixed position in the said place no matter the scrolling are, the culprits. Removing those two CSS properties would fix your "issue".