Help with Z-index in 3 elements

Question

I have a related problem that div will appear on top of each other. When I hover over some icon, I want the icon to turn blue and a message (stuck to the icon) will appear showing what that image is. I tried using the z-index to try to fix it, but it’s not working. The message only does not cover the image if I use z-index with negative value, only that this way, the message will also be covered by other elements... how can I solve this?

.menu-vertical {
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
    float: left;
    height: calc(100vh - 2px);
    margin-left: -40px;
    width: 50px;

    .item1 {
        background-image: url('/assets/img/menu.png');
        background-position: 50% 80%;
        background-repeat: no-repeat;
        padding-top: 40px; 

    }
    
    .item2{
        background-image: url('/assets/img/oportunidades.png');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        height: 60px;
        margin-top: 20px; 
        

        &:hover {
            background-image: url('/assets/img/propostas_hover.png');
           
        }

    
        & .tooltiptext {
            visibility: hidden;
            background-color: #20A2FA;
            color: #fff;
            font-family: 'Open Sans';
            font-size: 12px;
            text-align: center;
            padding: 8.9px;
            border-top-left-radius: 8px;
            white-space: nowrap;
            margin-left: 20px;
            position: absolute;
            top: 73px;
            width: 150px;
            
            
          }
          
        &:hover .tooltiptext {
            background-repeat: no-repeat;
            visibility: visible;
    
        }

    }

  

    .item3{
        background-image: url('/assets/img/propostas.png');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        height: 60px;
        margin-top: 40px; 
       
        

        &:hover {
            background-image: url('/assets/img/propostas_hover.png');
            
        }

        & .tooltiptext {
            visibility: hidden;
            background-color: #20A2FA;
            color: #fff;
            font-family: 'Open Sans';
            font-size: 12px;
            text-align: center;
            padding: 8.9px;
            border-top-left-radius: 8px;
            white-space: nowrap;
            margin-left: 20px;
            position: absolute;
            top: 173px;
            width: 150px;
            
          }
          
        &:hover .tooltiptext {
            background-repeat: no-repeat;
            visibility: visible;
            
        }

    }

     .item4{
        background-image: url('/assets/img/cadastros.png');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        height: 60px;
        margin-top: 40px; 

        &:hover {
            background-image: url('/assets/img/cadastros_hover.png');
            
        }

        & .tooltiptext {
            visibility: hidden;
            background-color: #20A2FA;
            color: #fff;
            font-family: 'Open Sans';
            font-size: 12px;
            text-align: center;
            padding: 8.9px;
            border-top-left-radius: 8px;
            white-space: nowrap;
            margin-left: 20px;
            position: absolute;
            top: 273px;
            width: 150px;
            
          }
          
        &:hover .tooltiptext {
            background-repeat: no-repeat;
            visibility: visible;
            
        }


    }
    
    .item5 {
        background-image: url('../../../assets/img/voltar.png');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        height: 60px;
        margin-top: 40px; 

        &:hover {
            background-image: url('/assets/img/voltar_hover.png');
            
        }

        & .tooltiptext {
            visibility: hidden;
            background-color: #20A2FA;
            color: #fff;
            font-family: 'Open Sans';
            font-size: 12px;
            text-align: center;
            padding: 8.9px;
            border-top-left-radius: 8px;
            white-space: nowrap;
            margin-left: 20px;
            position: absolute;
            top: 373px;
            width: 150px;
            
          }
          
        &:hover .tooltiptext {
            background-repeat: no-repeat;
            visibility: visible;
            
        }


    }
}

<div class="menu-vertical">
  <div class="item1">
  </div>
  <div class="item2"><span class="tooltiptext">Oportunidades</span></div>
  <div class="item3"><span class="tooltiptext">Propostas</span></div>
  <div class="item4"><span class="tooltiptext">Cadastros</span></div>
  <div class="item5"><span class="tooltiptext">Voltar</span></div>
</div>

Answer 1

As stated in the comment, it is not possible to reproduce the error 100%; But, by the image, it should be the z-index of . menu-vertical and the div in which is the element of the " + new opportunity". as the . vertical-menu has no declared z-index, your children may fall below some element.

I think this would be solved with the declaration of a z-index: 100; no . menu-vertical.