[FIXED] How to display an icon over the react crop conponent?

Issue

I'm having problem with displaying an icon over the react crop conponent. When I remove the react crop conponent I can see the icon (undo button). Otherwise it seems to be under the crop conponent.

This is my code with the react crop conponent:

    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>
    )

This is my icon conponent which I would like to display over the react crop:

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

And this is my CSS code:

.preview {
    position: relative;
}

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

Any help would be appreciated!

Solution

As I stated in the comment, you need to add zIndex into one of your component. Let's say:

.your-class {
    z-index: 10;
}

Answered By - hisam

Answer Checked By - Marilyn (PHPFixing Volunteer)