late rendered div is not respecting z-index

Question

I have a webpage made with svelte and I am trying to create a sort of tooltip for a div that should be displayed on hover.

So I wrote this:

<div
  class="test"
  style="background-color: {testcase.failure ? 'red' : 'green'}"
  on:mouseenter={() => (testcase.mouseover = true)}
  on:mouseleave={() => (testcase.mouseover = false)}>
  {#if (testcase.failure && testcase.mouseover)}
    <div class="failure">
      <div class="name">{testcase.class}:{testcase.name}</div>
      <div class="error">{testcase.failure}</div>
    </div>
  {/if}
</div>

and it works in the sense that the failure div is shown only on hover. However it is of course shown underneath all elements that are "after" it in the DOM.

So I added a z-index to failure, but it does nothing. It is still displayed underneath everything despite having a much higher z-index.

After experimenting a bit I figured out that if I remove the if statement and simple always display the failure div, then it is "properly" displayed on top of everything else.

This seems really weird for me and I cannot figure out why it does this. Does anyone have any good explanation for it? (I know that I can probably always display it and just change opacity or something to get the same effect, but I am curious about the root cause)

the "test" class is positioned relative and the "failure" is absolute. but since they have a position, z-index should work right? — munHunger, Oct 19 '19 at 10:25
huh... I moved that z-index to test and now it works. I thought it wouldn't matter, but I might have done something funky with the css somewhere — munHunger, Oct 19 '19 at 10:30
yes it matter because it may create a stacking context. More details here: https://stackoverflow.com/a/54903621/8620333 — Temani Afif, Oct 19 '19 at 10:31
More about stacking context and z-index explained by Kevil Powell here: https://www.youtube.com/watch?v=uS8l4YRXbaw — Snailedlt, Oct 26 '22 at 09:35

late rendered div is not respecting z-index

0 Answers0