transition not respecting z index
Hi I have a transition however the element inside it which it's transitioning has z-10 the transition is within a div which has another item with z index 20. however when the transition runs its above the z-20 items for some reason? why may this be and how do i solve it? im using some sticky, absolute, relative etc positionings incase that matters
2 Replies
Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources provided do not contain explicit information about issues with Vue/Nuxt <Transition> components not respecting z-index, or how sticky/absolute/relative positioning might interact with z-index during transitions. The sources do discuss transitions in Nuxt and provide examples of modal/dialog transitions with z-index settings, but they do not address the specific scenario where a transitioning element appears above another element with a higher z-index, nor do they offer troubleshooting steps for this issue.
If you need more targeted help, you might want to inspect the actual rendered DOM during the transition to check if the transitioning element or its parent is being moved to a different stacking context, or if other CSS properties (like position or stacking context creation) are affecting the stacking order. But unfortunately, the knowledge sources do not provide a direct answer to your question.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.