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

我想让我的.dynamic-tooltip覆盖在我的.static-tooltip上.我的静态工具提示必须隐藏.

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

请看看我的代码.
https://jsfiddle.net/x883m3hg/

提前致谢.

最佳答案
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;
}

Revised Fiddle

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在'',则表示换行,用''切割。
代码实现 option = { backgroundColor: '#080b30', tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...