I have a problem with z-index.

Problem picture

As you can see, the dropdown is behind the dropdown element. But dropdown has z-index and position of 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;
}

CodePudding user response：

for this "dropdown-z-index" class you can give z-index as 9999, if this is not worked then try to add higher z-index than the below image block

CodePudding user response：

Without position, z-index will not work. Use:

.dropdown-z-index {
    position: relative;
    z-index: 1000;
}