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 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-default 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?