Non è possibile sovrapporre un div a un altro con z-index

Question

Desidero ottenere il mio .dynamic-tooltip da sovrapporre al mio .static-tooltip. E il mio tooltip statico deve essere nascosto.

Ma non riesco a farlo con z-index. Per favore dimmi dove sto andando male.

Si prega di dare un'occhiata al mio codice. https://jsfiddle.net/x883m3hg/

<div class = "static-tooltip"> 
    <div class = "tooltip-container"> 
    <div class = "item-key"> 
    Static tooltip Key 
    </div> 
    <div class = "item-value"> 
    Static tooltip Value 
    </div> 
    </div> 
</div> 


<div class = "dynamic-tooltip"> 
    <div class = "tooltip-container"> 
    <div class = "item-key"> 
    Dynamic tooltip Key 
    </div> 
    <div class = "item-value"> 
    Dynamic tooltip value 
    </div> 
    </div> 
</div> 

.static-tooltip{ 
    position:relative; 
    z-index:1; 
    width:100%; 
    height: 30px; 
} 

.dynamic-tooltip{ 
    position:absolute; 
    z-index:2; 
    top:3px; 
    width: 100%; 
    height:30px 
} 

Grazie in anticipo.

Answer 1

L'elemento body ha un margine predefinito di 8px. Cominciare rimuovendo che:

body { margin: 0; } 

quindi azzerare il top compensati sul dynamic-tooltip-0.

.dynamic-tooltip { top: 0; } 

Ecco il codice modificato:

• colori di sfondo aggiunto per l'illustrazione
• modifiche al codice HTML
• due modifiche al CSS

body { 
 
    margin: 0; /* new */ 
 
} 
 
.static-tooltip { 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: aqua; 
 
} 
 
.dynamic-tooltip { 
 
    position: absolute; 
 
    z-index: 2; 
 
    top: 0px; /* adjusted */ 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: red; 
 
}

<div class="static-tooltip"> 
 
    <div class="tooltip-container"> 
 
    <div class="item-key"> 
 
     Static tooltip Key 
 
    </div> 
 
    <div class="item-value"> 
 
     Static tooltip Value 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="dynamic-tooltip"> 
 
    <div class="tooltip-container"> 
 
    <div class="item-key"> 
 
     Dynamic tooltip Key 
 
    </div> 
 
    <div class="item-value"> 
 
     Dynamic tooltip value 
 
    </div> 
 
    </div> 
 
</div>

Revised Fiddle

Answer 2

Il div posizionato in modo assoluto deve essere all'interno di quello relativo in modo da sovrapporsi.

codice Modificato:

.static-tooltip { 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 100%; 
 
    height: 30px; 
 
} 
 
.dynamic-tooltip { 
 
    position: absolute; 
 
    z-index: 2; 
 
    width: 100%; 
 
    top: 0; 
 
}

<div class="static-tooltip"> 
 
    <div class="tooltip-container"> 
 
    <div class="item-key"> 
 
     Static tooltip Key 
 
    </div> 
 
    <div class="item-value"> 
 
     Static tooltip Value 
 
    </div> 
 
    </div> 
 

 
    <div class="dynamic-tooltip"> 
 
    <div class="tooltip-container"> 
 
     <div class="item-key"> 
 
     Dynamic tooltip Key 
 
     </div> 
 
     <div class="item-value"> 
 
     Dynamic tooltip value 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>