Nicht in der Lage, ein div über ein anderes mit z-index

Question

zu überlappen Ich möchte meine auf meinem .static-tooltip überlagern. Und meine statische Tooltip muss versteckt werden.

Aber ich bin nicht in der Lage, dies mit z-index zu tun. Bitte sag mir, wo ich falsch liege.

Bitte schauen Sie sich meinen Code an. 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 
} 

Vielen Dank im Voraus.

Answer 1

body Das Element hat einen Standardrand 8px. Starten Sie durch das Entfernen:

body { margin: 0; } 

dann die top auf der dynamic-tooltip-0 Offset zurückgesetzt.

.dynamic-tooltip { top: 0; } 

Hier ist Ihre überarbeitete Code:

• hinzugefügt Hintergrundfarben zur Illustration
• keine Änderungen HTML
• zwei Änderungen an 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

Das absolut positionierte div muss innerhalb des relativen so sein, dass es überlappt.

Edited Code:

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