Hide an element in HTML and CSS
Is there any chance that someone has a solution for this problem, If you look at my Codepen link there will be a text "Johnny" that I want to hide behind the dark grey div. Is there by any chance a simple solution for this? Thanks!
<!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Johnny Porty</title> <!-- LINKED CSS --> <link rel="stylesheet" href="./css/main.css"> <!-- LINKED FONT --> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <nav id="navbar"> <h1>NOICE</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact <span class="arrow arrow-bottom"></span></a></li> </ul> </nav> <div class="first_div"> <h1> JOHNNY </h1> </div> <div class="second_div"> <h1> STONEY </h1> </div> <!-- LINK SCRIPTS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="./js/main.js"></script> </body> </html> 
Explicitly define position: relative on .first_div AND .second_div and then Set z-index:10 on nav
window.onscroll = function() {scrollNav()}; var navbar = document.getElementById("navbar"); function scrollNav() { if (window.pageYOffset >= 1) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }html, body{ margin: 0; background-color: whitesmoke; } nav{ overflow: hidden; background-color: none; transition: all ease-in-out .2s; height: 75px; position: fixed; top: 0; width: 100%; line-height: 75px; padding-left: 10%; z-index:10; } nav h1{ display: inline; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; margin-right: 20%; } nav ul{ display: inline; padding-left: 0; } nav li{ display: inline; text-align: center; padding: 0px 2.5%; text-decoration: none; font-size: 17px; } nav a{ padding: 14px 16px; text-decoration: none; font-size: 17px; transition: all ease-in-out .2s; color: #212121; } .sticky { background-color: white; } .first_div{ background: url(../img/wide_mount.jpg) no-repeat center center fixed; -webkit-background-size: 75% auto; -moz-background-size: 75% auto; -o-background-size: 75% auto; background-size: 75% auto; height: 95vh; width: 100%; position: relative; z-index: 2; } .first_div h1{ color: rgb(199, 132, 45); font-family: 'Playfair Display', serif; letter-spacing: 10vw; margin: 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 128px; word-break: break-all; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; z-index: 3; } .first_div h1::selection{ color: white; background-color: rgb(199, 132, 45); } .second_div{ height: 2000px; background-color: #212121; padding: 0; margin: 0; z-index: 4; position: relative; } .second_div h1{ margin: 0; }<!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Johnny Porty</title> <!-- LINKED CSS --> <link rel="stylesheet" href="./css/main.css"> <!-- LINKED FONT --> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <nav id="navbar"> <h1>NOICE</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact <span class="arrow arrow-bottom"></span></a></li> </ul> </nav> <div class="first_div"> <h1> JOHNNY </h1> </div> <div class="second_div"> <h1> STONEY </h1> </div> <!-- LINK SCRIPTS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="./js/main.js"></script> </body> </html>
z-index won’t work without explicit positioning. Set position: relative on .first_div and .second_div to make your current code work as expected.
im not sure about whether its what you wanted, but you can try to replace you css code with
html, body{ margin: 0; background-color: whitesmoke; } nav{ overflow: hidden; background-color: none; transition: all ease-in-out .2s; height: 75px; position: fixed; top: 0; width: 100%; line-height: 75px; padding-left: 10%; z-index: 10; } nav h1{ display: inline; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; margin-right: 20%; } nav ul{ display: inline; padding-left: 0; } nav li{ display: inline; text-align: center; padding: 0px 2.5%; text-decoration: none; font-size: 17px; } nav a{ padding: 14px 16px; text-decoration: none; font-size: 17px; transition: all ease-in-out .2s; color: #212121; } .sticky { background-color: white; } .first_div{ background: url(../img/wide_mount.jpg) no-repeat center center fixed; -webkit-background-size: 75% auto; -moz-background-size: 75% auto; -o-background-size: 75% auto; background-size: 75% auto; height: 95vh; width: 100%; z-index: 2; } .first_div h1{ color: rgb(199, 132, 45); font-family: 'Playfair Display', serif; letter-spacing: 10vw; margin: 0; position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); font-size: 128px; word-break: break-all; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; z-index: 2; } .first_div h1::selection{ color: white; background-color: rgb(199, 132, 45); } .second_div{ position: absolute; height: 2000px; background-color: #212121; padding: 0; margin: 0; width: 100%; z-index: 4; } .second_div h1{ margin: 0; } 
