javascript — поздний визуализированный div не соответствует z-index

поздний рендеринг div не соответствует z-index

У меня есть веб-страница, созданная с помощью svelte, и я пытаюсь создать своего рода всплывающую подсказку для элемента div, который должен отображаться при наведении курсора.

Итак, я написал это:

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

и это работает в том смысле, что failure div отображается только при наведении курсора. Однако это, конечно, показано под всеми элементами, которые «после» этого в DOM.

Поэтому я добавил z-index к failure , но это ничего не делает. Он по-прежнему отображается под всем, несмотря на то, что имеет гораздо более высокий z-индекс.

Немного поэкспериментировав, я понял, что если я удаляю оператор if и simple всегда отображаю div с ошибкой, то он «правильно» отображается поверх всего остального.

Это кажется мне очень странным, и я не могу понять, почему это так. У кого-нибудь есть хорошее объяснение этому? (Я знаю, что я, вероятно, всегда могу отобразить это и просто изменить непрозрачность или что-то подобное, чтобы получить тот же эффект, но мне любопытно узнать причину)

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector