React+Tailwind：容器Hover时的元素定位问题

你遇到的核心问题是没有给父容器.TaskBox设置定位上下文，导致position: absolute的.deleteTask相对于根元素（屏幕）定位，而非目标白色容器；同时position: relative会占用文档流空间，挤压内部元素。

解决步骤 #

1. 给.TaskBox添加position: relative，作为内部绝对定位元素的参考容器
2. 调整.deleteTask的定位样式，移除不必要的!important，基于父容器完成定位
3. 修正.TaskInfo的flex布局写法，确保内容垂直居中不受影响

修改后的CSS代码 #

.trashIcon
{
  width: 1.75em;
  height: 1.95em;
  color: indianred;
  transition: transform 0.15s ease;
}

.deleteTask:hover .trashIcon
{
  transform: scale(1.1);
  color: firebrick;
}

.deleteTask
{
   position: absolute;
   left: 50%;
   bottom: 12%;
   transform: translateX(-50%);
   padding: 6px 6px;
   background-color: lightslategray;
   border-radius: 12px;
   transition: transform 0.15s ease;
   visibility: hidden;
   z-index: 10;
}
.deleteTask:hover
{
  background-color: dimgrey;
}

.TaskBox
{
  position: relative;
}

.TaskBox:hover .deleteTask
{
   transform: translateX(-50%) scale(1.1);
   visibility: visible;
}

.TaskInfo
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.newTaskForm
{
  width: 50%;
}

关键说明 #

• .TaskBox设置position: relative后，内部绝对定位元素会以它为基准定位，不再脱离容器
• transform: translateX(-50%)配合left:50%实现图标水平居中，比固定margin更适配容器尺寸变化
• 修正.TaskInfo的flex布局写法（display: flex + flex-direction: column），添加height:100%确保内容在容器内垂直居中
• 移除position: absolute后的!important，避免样式优先级冲突

修改后，图标会在容器hover时显示，既不会挤压内部元素，也会始终跟随白色容器移动，不会固定在屏幕某个位置。

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