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
onClicka button that has a span when
onHoverThis 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={}
>
{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={}
type={type}
>
{children}
<span onClick={(e) => e.stopPropagation()}
className={rounded-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?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
