div 工具提示上的 z-index 和 transform skewX 属性有问题

Question

css 程序员，各位程序员大家好； 我对此有点头疼。 我无法在具有相同属性的图像上方显示 position 工具提示； 这是问题之一； https://prnt.sc/shovd7

如您所见，上面的内容没有与最后一张图片重叠。 我不明白为什么。 我设置了一个“r”class 来配置屏幕的右侧以供 position 使用。

这是工具提示的代码；

 .tooltip {outline:none;position: relative;display: inline-block;}.tooltip div { z-index: 4; display: none; color: white; text-shadow: none; text-decoration: none; background: #252525; padding: 0px 15px; white-space: prewrap; width: 265px; font-size: 16px; float: left; box-shadow: 0px 0px 5px -3px #ffffff, 0 0px 0px 0 rgba(255, 70, 70, 0.19); text-align: left; position: fixed; }.last{ width: 25px; margin-right: 5px; margin-bottom: 5px; position:relative; z-index: 2; }.tooltip.r div { float: right; position: fixed; }.tooltip.r > img { transform: skewx(-30deg); }.le{ position: absolute; }.le.r{ right: 183px; width: 89px; height: 139px; overflow-y: auto; transform: skewX(30deg); padding-left: 20000px; margin-left: 0px; overflow-x: hidden; padding-right: 2px; float: right; } a.tooltip:hover div{ display: inline-block; position: absolute;}

 <div class="le r"> <a class="tooltip r" href="#"> <img id="665" class="fl-r last" src="https://www.anime-blast.com//images/skills/665.png?"> <div> <img class="point" src="./images/arrow_right.png"> <h1>Bodiless Suit of Armor</h1><p>- <b>Alphonse Elric</b> has 5 damage reduction.<i style="color:#BA2415;"> this skill ends when Alphonse Elric dies</i></p><p>- <b>Alphonse Elric's</b> damage will be increased by 10.<i style="color:#BA2415;"> this skill ends when Alphonse Elric dies</i></p></div></a> <a class="tooltip r" href="#"> <img id="665" class="fl-r last" src="https://www.anime-blast.com//images/skills/665.png?"> <div><img class="point" src="./images/arrow_right.png"> <h1>Bodiless Suit of Armor</h1><p>- <b>Alphonse Elric</b> has 5 damage reduction.<i style="color:#BA2415;"> this skill ends when Alphonse Elric dies</i></p><p>- <b>Alphonse Elric's</b> damage will be increased by 10.<i style="color:#BA2415;"> this skill ends when Alphonse Elric dies</i></p></div></a> </div>

最后，我的第二个问题是我在一个 div 中设置了工具提示，该 div 保存了最后使用的“能力”的记录。 你hover过来，这个能力的描述显示。 https://prnt.sc/shozxl

我试图隐藏它的滚动条，所以我在左边添加了一个填充，问题是填充与其他玩家的技能重叠，我无法点击它们，window 分为 2 和一个页脚。 因此，如果我在屏幕左侧设置一个 z-index，它会将工具提示本身隐藏在角色技能集下方。 滚动条是否有任何解决方法或当前设计的修复程序。 我正在尝试优化它以适用于所有浏览器。

我的项目取决于你们所有人。很抱歉造成混淆，如果我重复一个问题。 我环顾四周，真的找不到解决办法。

Answer 1

要隐藏滚动条，您只需更改overflow-x: hidden; 和overflow-y: auto; 只有单数overflow: hidden; 样式属性：

.le.r{
    right: 183px;
    width: 89px;
    height: 139px;
    overflow: hidden;
    transform: skewX(30deg); 
    padding-left: 20000px;
    margin-left: 0px;
    padding-right: 2px; 
    float: right;
}