不能用z-index将一个div重叠在另一个div上

Question

我想让我.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
}

提前致谢.

Answer 1

该body元素的默认边距为 8px。首先删除它：

body { margin: 0; }

然后将偏移量重置top为。dynamic-tooltip0

.dynamic-tooltip { top: 0; }

这是您修改后的代码：

• 添加背景颜色以进行说明
• 没有对 HTML 进行任何更改
• CSS 的两处更改

body { margin: 0; }

.dynamic-tooltip { top: 0; }

修订版小提琴