变换时使用工具提示叠加问题：使用矩阵

Question

我正在尝试将工具提示集成到生成的HTML代码中。我的问题是，如果转换：矩阵应用于它们，工具提示将不会覆盖HTML中定义的下层元素，我必须为单词创建工具提示并显示图像（在此示例中为Benzene）我的问题的基本示例可以观察这个CODEPEN

CSS：

.normal {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 0, 0, 1, 80, 120);
  background-color: pink;
  position: absolute;
  unicode-bidi: bidi-override;
  transform-style:flat;
  z-index:900;
}
.hover {
    position:relative;
    background-color:#e6ffff;
    z-index:900;
}

.tooltip {
  top:0px;
  background-color:white;
  color:white;
  border-radius:5px;
  border:solid 1px #111111;
  display:none;
  position:absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition:  opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition:  opacity 0.5s;
  transition:  opacity 0.5s;
  z-index:999;
}

.hover:hover .tooltip {
    display:inline;
    z-index:999;
}
.tooltip:hover{ z-index:999;}

HTML：

<div class="" style="width:100%;">
<span class="hover">Benzene
    <span class="tooltip">
      <img name="mol-img-786" style="width:200px; height:200px;" src="data:image/png;base64,..."/>
    </span>
</span>  is an important organic chemical compound with the chemical formula C6H6. The benzene molecule is composed of six carbon atoms joined in a ring with one hydrogen atom attached to each. As it contains only carbon and hydrogen atoms, benzene is classed as a hydrocarbon.
</div>
<div class="changed"><span class="hover">Benzene
    <span class="tooltip">
      <img name="mol-img-786" style="width:200px; height:200px;" src="data:image/png;base64,..."/>
    </span>
</span>  is an important organic</div><br/><br/><br/><br/>
<div class="changed"><span class="hover">Benzene
    <span class="tooltip">
      <img name="mol-img-786" style="width:200px; height:200px;" src="..."/>
    </span>
</span>   is an important organic</div><br/><br/><br/><br/><br/><br/>
<div class="changed"><span class="hover">Benzene 
    <span class="tooltip">
      <img name="mol-img-786" style="width:200px; height:200px;z-index:999;" src="data:image/png;base64,..."/>
    </span>
</span>  is an important organic</div>

Answer 1

您不需要对所有项目使用z-index。您只对div.changed感兴趣。

由于工具提示从元素向下显示。工具提示上方仅显示以下项目。如果第一个.changed有z-index: 1000，下一个项目需要z-index: 999，第三个项目需要z-index: 998等。 ，一直在它上面的那个。

如果元素很少，请手动添加z-index，但如果生成了项目，则可以使用js中的for loop。

document.addEventListener('ready', function(){
   let changed = document.getElementsByClassName('changed'); (1)
   let index = 1000;
   for(let c=changed.length ; c > 0 ; c++){
   changed[c].zIndex = index; (2)
   index--;
   }
});

（1）用.changed类选择所有项目。

（2）循环中的当前元素将获得当前索引

（3）索引递减1，因此进入循环的下一个元素将获得一个低于1的z-index。

为了更优雅，写在js，评论日。

TLDR：如果元素很少，请手动添加z-index，但如果生成了项目，则可以使用代码块中的js。