Having a problem with z-index and the transform skewX property on a div tooltip

Question

Hello css programmers and programmers in general; I'm having a bit of a headache with this. I can't manage to position a tooltip above an image that has the same properties; This is one of the issues; https://prnt.sc/shovd7

As you can see the above doesn't overlap the last image. I don't understand why. I set an "r" class to configure the right side of the screen for position use really.

Here is the code for the tooltip;

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

Finally my second problem is I set the tooltip within a div which holds a record of the last "abilities" used. You hover over and the description of this ability shows. https://prnt.sc/shozxl

Im trying to hide the scroller bar of this so I add a padding left, the issue is the padding overlaps the skills for the other player and im not able to click them, the window is divided in 2 and a footer. So if I set a z-index on the left wing of the screen it will hide the tooltip itself below the skill set for the character. Is there any work around for the scrollerbar or a fix for this current design. I am trying to optimize this to work for all browsers.

My project depends on you all.. Sorry for the confusion and if im repeating a question. I've looked around and really found no solution.

Answer 1

To hide the scrollbar you just have to change the overflow-x: hidden; and overflow-y: auto; to only the singular overflow: hidden; style attribute:

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