I am encountering an issue with z-index levels.
The problem lies in the fact that the dropdown is appearing behind another element, even though it has a higher z-index and position set to sticky.
<div className={open ? "dropdown-z-index sticky dropdown container position-absolute end-0 col-md-2 m-2" : "dropdown-out"}>
<div onClick={closeDropdown} className="dropdown-item cursor-pointer"><BiArrowBack /></div>
<Link className="unstyled-link dropdown-item" to="/profile"><div onClick={closeDropdown} className="cursor-pointer">Profile</div></Link>
<Link className="unstyled-link dropdown-item" to="/settings"><div onClick={closeDropdown} className="cursor-pointer">Settings</div></Link>
</div>
.dropdown {
width: 15%!important;
padding: 10px;
border-radius: 10px;
background-color: #fff;
opacity: 1;
}
.dropdown-item {
border-radius: 7px;
color: none!important;
}
.dropdown-z-index {
z-index: 1000;
}