-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tabs
component uses fixed z-index
#249
Comments
Thank you for pointing this out @mike-plummer It does indeed look awkward. CSS Methods that rely heavily on JavaScript and the Framework to work are prone to fail in the future. When we change framework for instance. So I try to avoid them to build tools supposed to be shared. Therefore, I would prefer not to use anything that calculates the z-index from context. There is a great workaround to your issue though, it relies on stacking context. before<div class="z-10">
content that gets hidden
</div>
<Tabs :tabs="tabs" /> after<div class="z-10">
content that no more gets hidden
</div>
<div class="relative z-0"><!-- this line creates a stacking context whose content will always stay under z-10 -->
<Tabs :tabs="tabs" />
</div> Also given the standard tailwind z-index values, 1, 2 and 3 would not be available. |
Tabs
component buttons havez-20
class applied which can elevate the component above an overlay. Can this be restructured to rely onauto
strategy forz-index
?Able to work around it in the app by applying these overrides - as a simple solution it looks like you can bump the
z-index
values from 10, 20, 30 to 1, 2, 3 to reduce the risk of overlap conflictThe text was updated successfully, but these errors were encountered: