I created a simple navbar and it is working but is also overlapping.
The navbar and the main element content both uses relative and absolute positions to work
Already tried changing position:absolute here and there and nothing seems to work.
It just keeps overlapping when opened the menu it opens behind images and diva in main content so you cannot see the menu.
How to make it visible when opening the drop-down menu and to be on/over the main content as any drop-down menu use to do ?
Here is the code
I also created a Codepen to see what I mean, just hover on the menu NEWS
https://codepen.io/familias/pen/YzRVLWG
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>news</title>
<style>
super-newspaper {
display:grid;
grid-template-areas:
'navi'
'main';
}
nav {
grid-area:navi;
text-align:center;
padding-bottom:30px
}
main {
grid-area:main;
}
.mymenu {
position:relative;
display:inline-block;
}
.mymenu a {
position:relative;
display:inline-block;
}
.times {
display:none;
position:absolute;
width:auto;
}
.mymenu:hover .times
{display:block}
super-recent-news {
display:grid;
grid-template-areas:
'first second'
'third fourth';}
article {
display:block;
width:90%
}
article {
}
article figure {
position:relative;
margin:0;width:100%;
background-color:#000;
height:50px;
}
article figcaption {
position:absolute;
top:8px;
right:8px;
background-color:#121212;
color:#FFFFFF;
border-radius:3px;
padding:3px 6px 3px 6px
}
article img {
width:100%;background-color:#000;height:50px;
}
super-recent-news article:nth-child(1) {grid-area:first;}
super-recent-news article:nth-child(2) {grid-area:second;}
super-recent-news article:nth-child(3) {grid-area:third;}
super-recent-news article:nth-child(4) {grid-area:fourth;}
</style>
</head>
<body>
<super-newspaper>
<nav class="menu">
<div class="mymenu"><a href="#">News</a>
<div class="times">
<a href="#">World</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</div></div>
</nav>
<main>
<super-recent-news>
<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>
<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>
<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>
<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>
</super-recent-news>
</main>
</super-newspaper>
</body>
</html>
To make something render on top of something else you can just use
z-index: 2;
Or anything more than 1 since everything else uses 1, there might be things that use a higher z-index so to be sure, I would recommend using z-index: 10;