Cannot cross one div over another with z-index

Question

I want my .dynamic-tooltip overlap with my .static-tooltip . And my static tooltip should be hidden.

But I can not do this with z-index . Please tell me where I am going wrong.

Please see my code. 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 } 

Thanks in advance.

Answer 1

The body element has a default size of 8px. Start by removing this:

 body { margin: 0; } 

Then reset the top offset on dynamic-tooltip to 0 .

 .dynamic-tooltip { top: 0; } 

Here is your revised code:

• added background colors for illustration
• no changes to HTML
• two changes to 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 script

Answer 2

An absolutely div should be inside the relative div to overlap.

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>