无法使用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
}

感谢您的预先帮助。

- user3709813

Answer 1

元素默认的margin为8px。首先要移除它：

body { margin: 0; }

然后将 dynamic-tooltip 的 top 偏移重置为 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 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

- Michael Benjamin

Answer 2

绝对定位的 div 必须在相对定位的 div 内部，以便重叠。

编辑后的代码：

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

- Ani Menon