Hola, estoy tratando de hacer un efecto con un índice z y un desplazamiento del mouse, pero una de mis tarjetas comienza a parpadear cuando paso el mouse sobre ella.

mi componente: si elimino la primera posición relativa, el zoom de mi desplazamiento se ve demasiado grande, no se parece al tamaño de la posición relativa, pero el parpadeo se detiene, y si elimino la segunda posición relativa, sigue parpadeando

 <div className="card-component position-relative"> <div className={`card rounded-0 rounded-bottom border-top-0 border-gray border-lighten-2 position-relative p-3 bg-gray bg-lighten-4 cursor-pointer ${positionCollisionCard}`} onMouseEnter={(event) => collisionCard(event)} onMouseLeave={() => setPositionCollisionCard('')}> {children} </div> </div>

efecto de desplazamiento:

Necesito usar la posición absoluta porque necesito pasar por encima de otros componentes sin empujarlos, esa es la razón por la que no uso relativo, z-index: 99999 no funciona

 .card-component { &:hover{ .card{ position: absolute !important; top: 0; width: 130%; z-index: 99999; @include transition(all .2s ease-out); } .description-content { display: block !important; .description { height: 54px; max-height: 54px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } } } } .card { width: 100%; @include transition(0); &.hover-right { right: 0 !important; } &.hover-bottom { bottom: 0 !important; } }