日历CalendarBox悬浮时EventDetails弹窗定位异常求助

问题原因 #

1. 绝对定位参照错误：position: absolute的元素仅会以最近的非static定位父元素为定位基准。你的eventDetails与calendarbox是同级关系，calendarbox的position: relative无法作用于同级弹窗，弹窗会向上寻找第一个非static的全局容器作为参照，导致位置固定不变。
2. 相邻兄弟选择器的局限：你使用calendarbox:hover + .eventDetails触发弹窗显示，但这种同级结构下，弹窗没有正确的定位锚点，无法跟随calendarbox的位置动态调整。

解决步骤 #

步骤1：调整DOM结构，将弹窗嵌套进日历盒子 #

把eventDetails移动到calendarbox内部，让它成为日历盒子的子元素，这样calendarbox的position: relative就能成为弹窗的定位参照。

修改后的JSX代码：

return (
    <div className={`border border-gray-200 flex flex-col calendarbox ${getCurrentDayClass()} ${hasEventsOnDay}`}>
      {rowIdx === 0 && (
          <p className="text-sm text-slate-950 day text-center bg-personal">
            {day.format("ddd").toUpperCase()}
          </p>
      )}
      <div className="flex flex-col">
        <p className={`text-base p-1 my-1 text-center`}>{day.format("DD")}</p>
      </div>
      <div className="flex-1 cursor-pointer" 
           onClick={()=> {
            setDaySelected(day);
            handleShowEventModal(day.format("DD-MM-YYYY")
            )}}
      >
        {getDetails()}
      </div>
      {/* 将弹窗移至calendarbox内部 */}
      <div className="eventDetails"> 
        {getHoveredEventDetails()}
      </div>
    </div>
);

步骤2：修改CSS，让弹窗定位在日历盒子正下方 #

调整eventDetails的定位属性，改用top: 100%和left: 0实现正下方对齐，同时优化hover触发逻辑与过渡效果：

.calendarbox {
  display: inline-block;
  position: relative; /* 保留作为子元素的定位参照 */
  background-color: #fff4e4;
  border: 1px solid #BBB;
  min-width: 120px;
  min-height: 100px;
  max-height: 120px;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 20rem;
  z-index: 0;
}

.eventDetails{
  position: absolute;  
  top: 100%; /* 与日历盒子底部对齐，实现正下方定位 */
  left: 0;
  width: max-content; /* 自适应内容宽度，也可设固定值 */
  min-width: 100%; /* 可选：让弹窗宽度与日历盒子一致 */
  opacity: 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  background-color: #313131e8;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease; /* 用opacity+visibility实现平滑过渡 */
  z-index: 2000;
  color: #fff; /* 深色背景下添加文字颜色，提升可读性 */
  padding: 1rem; /* 增加内边距优化排版 */
}

/* 改为子元素选择器触发hover状态 */
.calendarbox:hover .eventDetails{
  opacity: 1;
  visibility: visible;
}

额外优化建议 #

• 若弹窗内容过长，可添加max-height与overflow-y: auto实现滚动；
• 移除原CSS中的transition-delay: 3s，避免hover后延迟过久才显示弹窗；
• 若弹窗可能超出页面边界，可通过JS计算位置，动态调整弹窗的显示方向（比如靠近底部时改为向上显示）。

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