How to make objects overlap CSS grid objects? - css

Question

I am trying to make a box appear that starts at the bottom of the green buttons. For now, it's red. I made the top navbar with CSS Grid, but not the red box. How do make it overlap the navbar?
Here is more (pointless) words it forced me to add since my post is "mostly code". What an absolute joke.
Navbar.js
import React from 'react';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell, AiOutlineSearch } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<div>
<nav id="nav-bar">
<div className="container">
<h2 className="homeBtn">VIZZEY</h2>
<div className="search">
<input type="search" placeholder="Search" className="form-control" />
<button className="searchBtn"><AiOutlineSearch /></button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">
<FiMail /></button>
</li>
<li className="btn">
<button className="icon-btn"><FaPlus /></button>
</li>
<li className="btn">
<button className="icon-btn"><AiTwotoneBell /></button>
</li>
<li className="btn">
<button className="icon-btn"><BsFillPersonFill /></button>
</li>
</ul>
</div>
</nav>
<div>
<div className="container">
<h2 className="homeBtn hide"></h2>
<div className="search">
</div>
<div className="container col-sm-4" xs={6}>
<div className="card" style={{width: "200px", height: "300px", padding: "20px"}}>
<h5 className="text-center" > </h5>
<a className="text-center">
</a>
<p className="text-center"></p>
</div>
</div>
{/* <li className="btn">
<div className="dropdown">lol</div>
</li> */}
</div>
</div>
</div>
)
}
export default Navbar;
navbar.css
* {
margin:0;
padding:0;
box-sizing:border-box;
}
ul {
list-style: none;
display: flex;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
text-align: center;
justify-content: center;
padding-left: 25%;
color:#00ce7f;
}
#nav-bar {
background-color: #626466;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
height: 55px;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 70%;
border: none;
padding-left: 10px;
font-size: 20px;
}
.search {
padding-left: 15%;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
padding-right: 20px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
font-size: x-large;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-size: large;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 40px;
border: none;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
.profileSettings {
background-color: red;
padding-left: 50px;
padding-right: 50px;
text-align: center;
width: 100px;
border: rgb(111, 0, 255);
border-style: solid;
}
.hide {
visibility: hidden;
}
.dropdown {
height: 120px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
font-size: x-large;
}
.card {
background-color: red;
}

Answer 1

In this case, I would like to make the sidebar fixed. This will also make sure that the sidebar will overlap over the navbar, and you will have the full-screen sidebar.
The following snippet should work for you.
.sidebar { position: fixed; top: 0; right: 0; height: 100vh; width: 350px; background: red; z-index: 1; }