I want to move the sub-nav (#search-div) to the background. Currently it appears in front of the main menu bar. Usually such issues could be solved with the help of position and z-index parameter, both I set. Still the stack order is broken.
The slide effect should appear behind the main menu bar on the left side. Unfortunately it appears on top of it. I would appreciate any hint which helps me further.
body {
position: absolute;
height: 100%;
background: #e6e7ee;
overflow: hidden;
margin: 0px;
}
#svg{
position: absolute;
}
input.toggle-button[type="checkbox"] {
position: absolute;
box-shadow:
6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
background: #f2f3f7;
cursor: pointer;
border: none;
height: 47px;
width: 47px;
margin-left: 6.5px;
transition-property: background-color, box-shadow;
transition-duration: 0.1s;
border-radius: 50%;
font-family: FontAwesome;
color: #7a7a7a;
font-size:20px;
-webkit-appearance: none;
display: flex;
align-items: center;
justify-content: center;
}
input.toggle-button[type="checkbox"]:after{
font-family: FontAwesome;
color: #7a7a7a;
font-size:20px;
}
input.toggle-button[type="checkbox"]:checked{
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
input.toggle-button[type="checkbox"]:checked::after {
color:#3498db;
}
input.toggle-button[type="checkbox"]:hover{
color:#3498db;
}
select {
position: absolute;
height: 35px;
width: 220px;
appearance: none;
background: url(data:image/png;base64,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);
background-repeat: no-repeat;
background-position: right;
background-size: 1.8em;
border-radius: 10px;
font-size: 16px;
border: none;
box-shadow:
0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
border-radius: 10px;
cursor: pointer;
}
button {
position: absolute;
box-shadow:
6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
background: #f2f3f7;
cursor: pointer;
border: none;
height: 40px;
width: 40px;
transition-property: background-color, box-shadow;
transition-duration: 0.2s;
border-radius: 50%;
font-family: FontAwesome;
color: #7a7a7a;
font-size:20px;
}
button:active {
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
button:hover{
color: #3498db;
}
.container:hover{
color: #3498db;
}
/****************************************
****************** Nav ******************
****************************************/
.nav {
position: absolute;
top: 0;
width: 60px;
height: 100vh;
background: #ecf0f3;
border-top-right-radius: 35px;
border-bottom-right-radius: 35px;
box-shadow:
-10px -10px 15px rgba(255,255,255,0.5),
10px 10px 15px rgba(70,70,70,0.12);
}
#nav{
position: absolute;
z-index: 10;
}
.sub-nav{
position: absolute;
top: 0;
height: 100vh;
background: #ecf0f3;
border-top-right-radius: 35px;
border-bottom-right-radius: 35px;
box-shadow:
-10px -10px 15px rgba(255,255,255,0.5),
10px 10px 15px rgba(70,70,70,0.12);
left: -350px;
z-index: 1;
}
.headline {
position: absolute;
top: 0;
height: 120px;
left: 120px;
display: flex;
align-items: center;
justify-content: center;
color: #4b4a4a;
font-size: x-large;
font-weight: 500;
}
.label {
position: absolute;
left: 60px;
color: #7a7a7a;
font-size: 18px;
}
.sub-nav-extend{
left: 30px;
}
/************* Search Area ************/
#search-toggle{
top: 15vh;
}
#search-toggle:after{
content: "\f002";
}
#search-div{
position: absolute;
width: 350px;
transition: all 0.3s ease;
z-index: 5;
}
#label-objectsearch{
top: 14vh;
}
#objectsearch{
position: absolute;
top: 17vh;
left: 6vh;
height: 35px;
width: 220px;
font-size: 16px;
background: #f8f9fb;
color: rgb(151, 150, 150);
border: none;
box-shadow:
0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
border-radius: 10px;
}
#confirm-objectsearch{
top: 17vh;
left:31vh;
}
#confirm-objectsearch:after{
content: "\f00c";
}
#reset-typesearch:after{
content: "\f0e2";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Access Control Allow Origin" content="*">
<title>GUI v0.4.1</title>
<!-- stylesheet -->
<link rel="stylesheet" href="style/zindex.css">
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<body>
<!--------------- SVG ----------------->
<svg id="svg"> </svg>
<!--------------- NAV ----------------->
<div id="nav" class="nav">
<!--------------- SEARCH ----------------->
<input class="toggle-button" type="checkbox" id="search-toggle">
<div id="search-div" class="sub-nav">
<label class="headline"> - Suche - </label>
<label class="label" id="label-objectsearch">Objektsuche</label>
<input id="objectsearch" type="objectsearch"placeholder=" Objektnamen eingeben..">
<button id="confirm-objectsearch"></button>
</div>
</div>
<script>
const searchToggle = document.getElementById("search-toggle")
const searchDiv = document.getElementById("search-div")
searchToggle.onclick = function() {
if (searchDiv.classList.contains("sub-nav-extend")) {
searchDiv.classList.remove("sub-nav-extend")
} else {
searchDiv.classList.add("sub-nav-extend")
}
}
</script>
</body>
</html>