Please help! I've been struggling to get the
<span> to appear behind the #sideBar using z-index: -3, but it's not working as expected.
body {
margin: 0px;
font-family: "Signika Negative", sans-serif;
background-color: #252525;
color: #f8f9fa;
user-select: none;
}
#sideBar{
width: 2vw;
height: 100vh;
background-color: rgb(15, 15, 15);
opacity: .99;
}
.menuBtn{
background: none;
cursor: pointer;
padding: .5vw;
border: none;
padding: none;
color: white;
font-weight: 600;
font-size: 1vmax;
}
.menuBtn .label{
transition: left .5s;
}
.label{
position: absolute;
font-size: .9vmax;
opacity: 1;
left: -2.2vw;
}
svg{
transition: transform .5s;
}
.menuBtn:hover svg{
transform: scale(1.2);
}
.menuBtn:hover .label{
opacity: 1;
left: 2.2vw;
}<!DOCTYPE html>
<html lang="en">
<head>
<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=Fira+Mono&family=Signika+Negative:wght@300&display=swap" rel="stylesheet"/>
<style>
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono&family=Signika+Negative:wght@300&display=swap");
</style>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OverStat</title>
</head>
<body>
<div id="sideBar">
<div class="menuBtn" onclick="clear()"><span class="label" >Clear all games and ranks</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="lightgrey" d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8....
I want the <span> to appear behind the #sideBar i tried z-index: -3 but that didn't work
body {
margin: 0px;
font-family: "Signika Negative", sans-serif;
background-color: #252525;
color: #f8f9fa;
user-select: none;
}
#sideBar{
width: 2vw;
height: 100vh;
background-color: rgb(15, 15, 15);
opacity: .99;
}
.menuBtn{
background: none;
cursor: pointer;
padding: .5vw;
border: none;
padding: none;
color: white;
font-weight: 600;
font-size: 1vmax;
}
.menuBtn .label{
transition: left .5s;
}
.label{
position: absolute;
font-size: .9vmax;
opacity: 1;
left: -2.2vw;
}
svg{
transition: transform .5s;
}
.menuBtn:hover svg{
transform: scale(1.2);
}
.menuBtn:hover .label{
opacity: 1;
left: 2.2vw;
}<!DOCTYPE html>
<html lang="en">
<head>
<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=Fira+Mono&family=Signika+Negative:wght@300&display=swap" rel="stylesheet"/>
<style>
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono&family=Signika+Negative:wght@300&display=swap");
</style>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OverStat</title>
</head>
<body>
<div id="sideBar">
<div class="menuBtn" onclick="clear()"><span class="label" >Clear all games and ranks</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="lightgrey" d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"/></svg></div>
<div class="menuBtn"><span class="label">Prefrences</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="lightgrey" d="M0 416c0-17.7 14.3-32 32-32l54.7 0c12.3-28.3 40.5-48 73.3-48s61 19.7 73.3 48L480 384c17.7 0 32 14.3 32 32s-14.3 32-32 32l-246.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 448c-17.7 0-32-14.3-32-32zm192 0a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM384 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-32-80c32.8 0 61 19.7 73.3 48l54.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-54.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l246.7 0c12.3-28.3 40.5-48 73.3-48zM192 64a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm73.3 0L480 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l-214.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 128C14.3 128 0 113.7 0 96S14.3 64 32 64l86.7 0C131 35.7 159.2 16 192 16s61 19.7 73.3 48z"/></svg></div>
<div class="menuBtn"><span class="label">How to use</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="lightgrey" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg></div>
</div>
</body>
</html>By setting the opacity to .99 on the #sidebar, a stacking context is created and anything inside remains attached to it even if a z-index of -1000 is applied.
#sidebar {
opacity: 1;
}
.label {
z-index: -3;
}
Explore more on the concept of stacking context.
When you put opacity: .99 on the #sidebar, it forms a stacking context on #sidebar and everything inside it is stuck on it even if you put a z-index: -1000.
#sidebar {
opacity: 1;
}
.label {
z-index: -3;
}
Read more about the stacking context.