i am doing a uni project and i have to replicate this site https://www.orlandoweekly.com/ I am doing good till now, i just want to make two separate div for the content on the left and the one on the right. So i use a div class="main-content" and declare it with Position: relative so that the nested div elements(left-content and right-content) can be specified with position: absolute and i can position them to the left and right. The problem is that when i do that and i scroll down the page the main-content goes over the navbar and it cover it.
I already try to fix it using the z-index and other basic methods but nothing seems to work. It only works as i want if i remove the position:relative in the main-content the div goes under as expected. I will share my code here (note: this is a different branch that i am using to test this thing so many div are missing)
/*Gestione della scrollata*/
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.bar');
var newItem = document.createElement('li');
newItem.innerHTML = '<a href="#">OW</a>';
if (window.scrollY > 45) {
if (!navbar.querySelector('#newItem')) {
newItem.id = 'newItem';
navbar.insertBefore(newItem, navbar.firstChild);
}
} else {
var addedItem = document.getElementById('newItem');
if (addedItem) {
addedItem.parentNode.removeChild(addedItem);
}
}
});*{
margin: 0;
box-sizing: border-box;
font-family:Lato, Helvetica, Arial, sans-serif;
}
.montserrat-h3 {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.open-sans-p {
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-variation-settings:"wdth" 100;
}
h3{
margin-top:6px;
}
p{
margin-top: 10px;
}
.title{
background-color: rgb(247,148,30);
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}
.title a{
text-decoration: none;
cursor: pointer;
color: white;
font-weight: 400;
}
#support{
height: auto;
width: 130px;
background-color: rgb(247,148,30);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
cursor:pointer;
transform-origin: bottom left;
transform: rotate(-90deg);
position: fixed;
left: 100%;
top: 50%;
transition: 0.5s;
}
#support-white{
color: white;
text-decoration: none;
}
#support:hover{
background-color: black;
text-decoration: none;
}
#privacy{
padding: 5px;
position: fixed;
top: 0;
right: 0;
height: auto;
width:auto;
background-color: rgb(54, 139, 214);
border-radius: 0 0 3px 3px;
}
.fa-cog{
color: white;
}
.Logo-conteiner {
width: 100%;
height: 110px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.logo{
width: 1020px;
margin: 5px;
}
.sticky-nav{
width: 100%;
height: 23px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
overflow: visible;
}
.navbar{
width: 1020px;
background-color: white;
z-index: 1000;
}
.navbar ul{
list-style: none;
padding: 0;
}
.navbar ul li {
display: inline-block;
margin-right: 0; /* Rimuovi il margine destro */
margin-bottom: 0;
padding-right: 8px; /* Aggiungi il padding destro */
}
.navbar ul li a{
font-family: 'Open Sans Condensed', sans-serif;
color: black;
text-decoration: none;
font-weight: 700;
margin: 4px;
transition: 100ms;
}
#newItem{
background-color: rgb(247,148,30);
display: flex;
justify-content: center;
align-items: center;
}
#newItem a{
color: white;
padding:0;
margin:0;
}
.navbar ul li a:hover {
background-color: rgb(247,148,30);
color: white;
margin-bottom: 0;
padding-bottom: 3px;
padding-top: 3px;
}
.bar {
display: flex; /* Imposta il layout flessibile */
flex-wrap: nowrap; /* Evita che gli elementi vadano a capo */
}
.bar li {
flex: 1; /* Distribuisci lo spazio disponibile in modo equo tra gli elementi */
white-space: nowrap; /* Impedisce alle voci di andare a capo */
}
#hrOrange{
border: 0.5px solid rgb(247,148,30);
}
#rettOrange{
background-color: rgb(247,148,30);
color: white;
margin: auto;
padding: 3px;
}
.item{
padding: 0;
margin:0;
display: flex;
justify-content: center;
}
.undercontent{
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
height: 2000px;
}
.main-content{
width: 60%;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.left-content{
width: calc(100%*(2/3));
position: absolute;
left: 0;
top: 0;
} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<div class="title">
<a href="#">BEST OF LOREM IPSUM</a>
<div id="privacy">
<i class="fas fa-cog"></i>
<a href="#">Lorem Ipsum</a>
</div>
</div>
<div id="support">
<a href="#" id="support-white">Lorem Ipsum</a>
</div>
<div class="Logo-conteiner">
<div class="logo">
<a href="#"><img src="https://placehold.co/230x97"></a>
</div>
</div>
<div class="sticky-nav">
<div class="navbar"> <!-- drop menu-->
<ul class="bar open-sans-p"> <!--menu-->
<li>
<a href="#" id="prim">Lorem Ipsum</a>
</li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#"><div id="rettOrange">Lorem Ipsum</div></a></li>
<li><div class="item"><a href="#"><i class="fas fa-user"></i></a></div></li>
<li><div class="item"><a href="#"><i class="fas fa-search"></i></a></div></li>
</ul>
<hr id="hrOrange">
</div>
</div>
<div class="undercontent">
<div class="main-content">
<div class="left-content">
<img src="https://placehold.co/644x361">
</div>
<div class="right-content"></div>
</div>
</div>Add following code to the .undercontent class.
position: relative;
z-index: -1;
/*Gestione della scrollata*/
window.addEventListener('scroll', function() {
var navbar = document.querySelector('.bar');
var newItem = document.createElement('li');
newItem.innerHTML = '<a href="#">OW</a>';
if (window.scrollY > 45) {
if (!navbar.querySelector('#newItem')) {
newItem.id = 'newItem';
navbar.insertBefore(newItem, navbar.firstChild);
}
} else {
var addedItem = document.getElementById('newItem');
if (addedItem) {
addedItem.parentNode.removeChild(addedItem);
}
}
});*{
margin: 0;
box-sizing: border-box;
font-family:Lato, Helvetica, Arial, sans-serif;
}
.montserrat-h3 {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.open-sans-p {
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-variation-settings:"wdth" 100;
}
h3{
margin-top:6px;
}
p{
margin-top: 10px;
}
.title{
background-color: rgb(247,148,30);
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}
.title a{
text-decoration: none;
cursor: pointer;
color: white;
font-weight: 400;
}
#support{
height: auto;
width: 130px;
background-color: rgb(247,148,30);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
cursor:pointer;
transform-origin: bottom left;
transform: rotate(-90deg);
position: fixed;
left: 100%;
top: 50%;
transition: 0.5s;
}
#support-white{
color: white;
text-decoration: none;
}
#support:hover{
background-color: black;
text-decoration: none;
}
#privacy{
padding: 5px;
position: fixed;
top: 0;
right: 0;
height: auto;
width:auto;
background-color: rgb(54, 139, 214);
border-radius: 0 0 3px 3px;
}
.fa-cog{
color: white;
}
.Logo-conteiner {
width: 100%;
height: 110px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.logo{
width: 1020px;
margin: 5px;
}
.sticky-nav{
width: 100%;
height: 23px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
overflow: visible;
}
.navbar{
width: 1020px;
background-color: white;
z-index: 1000;
}
.navbar ul{
list-style: none;
padding: 0;
}
.navbar ul li {
display: inline-block;
margin-right: 0; /* Rimuovi il margine destro */
margin-bottom: 0;
padding-right: 8px; /* Aggiungi il padding destro */
}
.navbar ul li a{
font-family: 'Open Sans Condensed', sans-serif;
color: black;
text-decoration: none;
font-weight: 700;
margin: 4px;
transition: 100ms;
}
#newItem{
background-color: rgb(247,148,30);
display: flex;
justify-content: center;
align-items: center;
}
#newItem a{
color: white;
padding:0;
margin:0;
}
.navbar ul li a:hover {
background-color: rgb(247,148,30);
color: white;
margin-bottom: 0;
padding-bottom: 3px;
padding-top: 3px;
}
.bar {
display: flex; /* Imposta il layout flessibile */
flex-wrap: nowrap; /* Evita che gli elementi vadano a capo */
}
.bar li {
flex: 1; /* Distribuisci lo spazio disponibile in modo equo tra gli elementi */
white-space: nowrap; /* Impedisce alle voci di andare a capo */
}
#hrOrange{
border: 0.5px solid rgb(247,148,30);
}
#rettOrange{
background-color: rgb(247,148,30);
color: white;
margin: auto;
padding: 3px;
}
.item{
padding: 0;
margin:0;
display: flex;
justify-content: center;
}
.undercontent{
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
height: 2000px;
position: relative;
z-index: -1;
}
.main-content{
width: 60%;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.left-content{
width: calc(100%*(2/3));
position: absolute;
left: 0;
top: 0;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<div class="title">
<a href="#">BEST OF LOREM IPSUM</a>
<div id="privacy">
<i class="fas fa-cog"></i>
<a href="#">Lorem Ipsum</a>
</div>
</div>
<div id="support">
<a href="#" id="support-white">Lorem Ipsum</a>
</div>
<div class="Logo-conteiner">
<div class="logo">
<a href="#"><img src="https://placehold.co/230x97"></a>
</div>
</div>
<div class="sticky-nav">
<div class="navbar"> <!-- drop menu-->
<ul class="bar open-sans-p"> <!--menu-->
<li>
<a href="#" id="prim">Lorem Ipsum</a>
</li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#"><div id="rettOrange">Lorem Ipsum</div></a></li>
<li><div class="item"><a href="#"><i class="fas fa-user"></i></a></div></li>
<li><div class="item"><a href="#"><i class="fas fa-search"></i></a></div></li>
</ul>
<hr id="hrOrange">
</div>
</div>
<div class="undercontent">
<div class="main-content">
<div class="left-content">
<img src="https://placehold.co/644x361">
</div>
<div class="right-content"></div>
</div>
</div>