React+Tailwind定位元素z-index异常：日历被按钮悬浮层遮挡

场景说明 #

我用Tailwind CSS开发了一个React应用，页面里有两个组件都采用「容器div设position: relative，子div设position: absolute」的布局：

• 点击触发展开的日历组件，相对于自身容器定位
• 带悬浮提示的按钮组件，鼠标悬停时显示操作说明（截图中出现两次）

相关代码 #

日历组件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>

按钮组件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>

已尝试方案 #

• 为日历的相关元素设置z-[9999]（对应CSS的z-index: 9999）
• 确认两个组件的父/子元素均未设置position和z-index属性

疑问 #

我遗漏了什么导致层级异常？

内容的提问来源于stack exchange，提问作者IdoBa