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

发布时间：2020-12-14 23:27:45 所属栏目：资源来源：网络整理

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!