React e Tailwind posicionando um item ao passar o mouse dentro do DOM

Tenho um ícone que só aparece quando passo o mouse sobre um contêiner. Atualmente, ele é relativo à posição porque preciso que ele fique dentro do contêiner. Sendo relativo, ele empurra para baixo o restante dos itens dentro do contêiner; no entanto, quero que eles fiquem centralizados verticalmente. Sei que poderia usar margem negativa para forçá-los a voltar para cima, mas isso normalmente é visto como uma prática ruim, então estou tentando descobrir outra maneira de lidar com isso.

^^ A aparência do front end com a posição relativa, o ícone permanece dentro do contêiner branco.

^^ Como fica o front end com a posição absoluta, não importa onde eu posicione o ícone, ele ficará no mesmo lugar na tela, independentemente do contêiner sobre o qual eu passe o mouse.

Este é o código de reação para a lista de rolagem de contêineres

return (
        <div className="container mx-auto p-4">
            <h1 className="text-4xl font-bold text-center mb-6 text-amber-100">Task List</h1>
            <div className="overflow-x-auto  scrollbar-custom">
                <ul className="flex space-x-4 mb-10 blue" style={{ listStyleType: 'none', padding: 0 }}>
                    { tasks.map((task) =>
                        (
                            <li key={task.id} 
                                className="TaskBox bg-white shadow-lg shadow-amber-200/60 rounded-lg p-8 shadow-sm min-w-[300px] max-w-[300px] flex-shrink-0">
                                <div className="deleteTask">
                                    <DeleteTask task={task}/>
                                </div>
                                <div className="TaskInfo">
                                <h4 className="text-2xl font-semibold text-gray-800 mb-2">{task.title}</h4>
                                <p  className="text-sm text-gray-500 mb-2"
                                    >Created on: {new Date(task.createdAt).toLocaleDateString('en-US', {
                                    year: 'numeric',
                                    month: 'long',
                                    day: 'numeric'
                                })}</p>
                                <p className="text-gray-600 mb-4">{task.description}</p>
                                <p  className={`text-sm ${task.isCompleted ? 'text-green-500' : 'text-red-500'}`}>Completed: {task.isCompleted ? 'Yes' : 'No'}</p>
                                </div>
                            </li>
                        ))}
                </ul>
            </div>
        </div>
    );

CSS para o código

.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 !important;
   left: 50%;
   bottom: 12%;
   padding: 6px 6px;
   background-color: lightslategray;
   border-radius: 12px;
   transition: transform 0.15s ease;
   visibility: hidden;
}
.deleteTask:hover
{
  background-color: dimgrey;
}

.TaskBox:hover .deleteTask
{
   display: inline-block;
   transform: scale(1.1);
   visibility: visible;
}

.TaskInfo
{
  display: flex-column;
  justify-content: center;
  align-items: center;
}

.newTaskForm
{
  width: 50%;
}

Tentei alternar para posição absoluta, pois não afeta outros elementos DOM. Eu esperava que ele ficasse dentro do contêiner branco, mas ele só fica dentro do contêiner como mostrado na primeira imagem com posição relativa.