Tengo un problema al mostrar un ícono sobre el componente de recorte de reacción. Cuando elimino el componente de recorte de reacción, puedo ver el ícono (botón de deshacer). De lo contrario, parece estar bajo el componente de cultivo.

Este es mi código con el componente de cultivo de reacción:

 return ( <div> <div className="webcamCapture"> { campic} </div> { buttons} {this.state.imageData && ( <> {src && ( <div className="preview"> <ReactCrop src={src} crop={crop} ruleOfThirds onImageLoaded={this.onImageLoaded} onComplete={this.onCropComplete} onChange={this.onCropChange} /> </div> )} </> )} </div> )

Este es mi componente de icono que me gustaría mostrar sobre el recorte de reacción:

 <div className="preview"> <div > <FontAwesomeIcon className="preview__close" icon={faChevronLeft} onClick={() => this.setState({ imageData: null })}/> </div> </div>

Y este es mi código CSS:

 .preview { position: relative; } .preview__close { position: absolute; top: 0; margin: 5px; cursor: pointer; color: red; }

¡Cualquier ayuda sería apreciada!