Z-index on different positioned elements in the same page
The problem:
Buttons that suppose to be behind are in front.
Description:
I have a react app using Tailwind css.
There are two different components on the same page that in both I am using position: relative on a container div, and position: absolute on the child div:
a calendar that opens
a button that has a span when
This is the calendar jsx:
This is the button jsx:
rounded-lg transition-opacity duration-400 -z-1
-bottom-6 left-1/2 transform -translate-x-1/2
What I've tried:
setting a z-index: 9999 to each of the calendar elements.
I also checked and there aren't any position nor z-index to parent / child elements for these two components.
WHAT AM I MISSING?
Buttons that suppose to be behind are in front.
Description:
I have a react app using Tailwind css.
There are two different components on the same page that in both I am using position: relative on a container div, and position: absolute on the child div:
a calendar that opens
onClick and positioned according to its container.a button that has a span when
onHover its shows and specifies the action of the button. (used twice as seen in the image)This is the calendar jsx:
<div className='relative flex items-center gap-2 xs:flex-col z-[9999]'>
<label
className='w-max px-2 flex gap-1 py-1 cursor-pointer md:w-full rounded-md bg-white'
onClick={() => setIsCalendar((prev) => !prev)}
>
{format(selectedDay, 'dd-MM-yyyy')}
<ArrowDownCircleIcon className='w-5' />
</label>
{isCalendar && (
<div
ref={calendarRef}
className={absolute top-10 shadow-lg bg-light w-max py-2 rounded-xl z-[9999]}
>
{visualCalendar}
<div className='w-11/12 flex justify-end'>
<Button type='button' theme='full' text='OK' className='text-xs' onClick={() => setIsCalendar(false)} />
</div>
</div>
)}
</div>This is the button jsx:
<button
onClick={onClick}
className={group relative}
type={type}
>
{children}
<span onClick={(e) => e.stopPropagation()}
className={absolute opacity-0 w-max group-hover:opacity-100 bg-sky-400 text-light text-xs p-1 cursor-defaultrounded-lg transition-opacity duration-400 -z-1
-bottom-6 left-1/2 transform -translate-x-1/2
}>
{hoverText}
</span>
</button>What I've tried:
setting a z-index: 9999 to each of the calendar elements.
I also checked and there aren't any position nor z-index to parent / child elements for these two components.
WHAT AM I MISSING?
