html – 无法使用z-index将一个div与另一个div重叠

概述我想让我的.dynamic-tooltip覆盖在我的.static-tooltip上.我的静态工具提示必须隐藏. 但我无法用z-index这样做.请告诉我哪里出错了. 请看看我的代码. https://jsfiddle.net/x883m3hg/ <div class = "static-tooltip"> <div class = "tooltip-container"> <div 我想让我的.dynamic-tooltip覆盖在我的.static-tooltip上.我的静态工具提示必须隐藏.

但我无法用z-index这样做.请告诉我哪里出错了.

请看看我的代码.
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}

提前致谢.

解决方法 body元素的默认边距为8px.首先删除：

body { margin: 0; }

然后将dynamic-tooltip上的顶部偏移重置为0.

.dynamic-tooltip { top: 0; }

这是您修改后的代码：

>添加背景颜色的插图
>没有对HTML的更改
> 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 >  <div >    <div >      Static tooltip Key    </div>    <div >      Static tooltip Value    </div>  </div></div><div >  <div >    <div >      Dynamic tooltip Key    </div>    <div >      Dynamic tooltip value    </div>  </div></div>

Revised Fiddle

总结

以上是内存溢出为你收集整理的html – 无法使用z-index将一个div与另一个div重叠全部内容，希望文章能够帮你解决html – 无法使用z-index将一个div与另一个div重叠所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。