Total removal of z-index from .modal class

[iamandrewluca]

Wouldn't it be better to allow the users themselves to decide the z-index of their modal? 👀
In most cases there is no need for z-index at all.

In my case, I have a problem, and the solution is to again add more z-index or remove z-index from .modal.

I have a modal, and inside the modal, I have a dropdown. Both modal and dropdown a Teleported to document.body, but because .modal has a z-index: 999 and is rendered before dropdown, it gets in front. In the end, the dropdown inside the modal is shown behind.

My solution was to reset z-index of .modal

@layer components {
	.modal {
		/*
		daisyUI modal by default has z-index: 999
		This creates z-index problems for elements
		inside the modal that are teleported to the body
		*/
		@apply z-auto;
	}
}

This becomes even more problematic when you have fullscreen elements, and you need to portal them inside the fullscreen element.

Example:

[saadeghi]

Is this <dialog> modal or checkbox modal?

In most cases there is no need for z-index at all.

With <dialog> element, z-index doesn't matter because <dialog> element is top-layer and goes on top of the whole document.

With the checkbox method, z-index is needed. without z-index everything that comes after the modal will be on top of it so it will force people to put the modal at the end of the document manually (or using those portals you mentioned) and it's not something everyone can do (because of isolation of code in components or limitations of CMS or because difficulty to keep track of placement of modal element or difficulty of data binding between components in different frameworks)

[iamandrewluca]

I see what you mean. I'm not using the checkbox method.

It seems the z-index is also needed without a checkbox when the declarative attribute open is used

See details[open] attribute https://play.tailwindcss.com/xNv1ye4Nnl (Applied z-auto on .modal)

The dialog goes in the top-layer only when called via DOM API modal.showModal()

Doing some more checks.

[DenjixPochita]

Hi, @iamandrewluca is #3290 related to it?

[iamandrewluca]

Not related. Answered in #3290