Nie można pokryć jednego elementu div przez inny z indeksem Z

Question

Chcę, aby mój .dynamic-tooltip został nałożony na mój .static-tooltip. Moja statyczna podpowiedź musi być ukryta.

Ale nie mogę tego zrobić z z-index. Proszę powiedz mi, gdzie się mylę.

Proszę spojrzeć na mój kod. 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 
} 

góry dzięki.

Answer 1

Element body ma margines domyślnej 8PX. Zacznij usuwając że:

body { margin: 0; } 

Następnie zresetować top offsetowy na dynamic-tooltip do 0.

.dynamic-tooltip { top: 0; } 

Oto Twoja zmieniony kod:

• dodane kolory tła dla ilustracji
• żadne zmiany do HTML
• dwóch zmian w 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

Element div ustawiony bezwzględnie musi znajdować się w obrębie względnego, aby zachodził na siebie.

kod Zmieniano:

.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>