(sorry for ugly output, code is jammed in from site) As the title tells, I'm having overlay issues, seen in my bootstrap row of projectLinks and in my flip card images. I've tried z-index, as seen in the code, but it still isn't layering correctly. My desired output is that as the header flowed over the items, they would become invisible, but they do not. Also, at a point the z-index was working, but it didn't save correctly, and now doesn't seem to work.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}.sticky{
top:0;
width:100%;
position:fixed;
}
.flip-card {
background-color: transparent;
width: 340px;
height: 340px;
}
.flip-card-inner {
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
position: relative;
}
.flip-card:hover .flip-card-inner {
transform: rotateX(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: white;
color: black;
transform: rotateX(180deg);
}
nav li a {
float:left;
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
transition:padding .5s;
text-decoration: none;
}
nav li a:hover {
padding:14px 50px;
background-color: yellowGreen;
text-decoration: none;
color:black;
}
nav ul {
list-style-type: none;
margin: 0;
padding:0;
overflow: hidden;
background-color: #333;
}
header{
background-color: DarkGreen;
text-align: left;
min-height:100px;
font-size:30px;
}
.projectLinks{
position:;
z-index=-1;
font-size:20px;
}
.projectLinks li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 30px;
transition:padding .5s;
text-decoration: none;
}
.projectLinks li a:hover {
padding:14px 50px;
background-color: black;
text-decoration: none;
color:white;
}
.projectLinks ul {
list-style-type: none;
overflow: hidden;
background-color: white;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Homepage</title>
<link rel="icon" href="https://codehs.com/uploads/063af136753d638b02456306efdc95d3">
<link rel="stylesheet" href="main.css">
</head>
<header>
<nav class="header" id="myHeader">
<ul>
<div clas="row">
<div class="col-sm">
<li><a href="index.html">------</a></li>
</div>
<div class="col-sm">
<li><a class="activePage" href="page2.html">----</a></li>
</div>
<div class="col-sm">
<li><a href="page3.html">----</a></li>
</div>
<div class="col-sm">
<li><a href="page4.html">----</a></li>
</div>
<div class="col-sm">
<li><a href="page5.html">---</a></li>
</div>
</div>
</ul>
</nav>
</header>
<body>
<div class="mainStuff" style="z-index=-1">
<div class="flip-card">
<div class="flip-card-inner" style="float:left">
<div class="flip-card-front">
<img src="https://codehs.com/uploads/504c73e33e57afde5449c3c673abb23f" alt="Avatar" class="size">
</div>
<div class="flip-card-back">
<h1 style="border-style:solid;">-----</h1>
<h2>--------</h2>
</div>
</div>
</div>
</body>
<!-- Next is also issue-->
<div class="projectLinks">
<ul>
<div class="row" >
<div class="col-sm">
<li><a href="#project1">Project 1</a></li>
</div>
<div class="col-sm">
<li><a href="#project2">Project 2</a></li>
</div>
<div class="col-sm">
<li><a href="#project3">Project 3</a></li>
</div>
<div class="col-sm">
<li><a href="#project4">Project 4</a></li>
</div>
<div class="col-sm">
<li><a href="#project5">Project 5</a></li>
</div>
</div>
</ul>
</div>
<div style="padding-bottom:500px"></div>
