I have a modal created using the react-modal and I'm trying to stylize it putting an exit button at the top left, half in and half out of the modal

Question

I have the code below and the exitIcon button is the one I'm trying to make half in and half out of the modal. I've tried using z-index in it but it seems to not work properly, I also already changed the positions so it accept z-index property but still not working.

const ModalComponent = ({closeModal}: ModalProps) => {
  return (
    <Wrapper>
      <button className="exitIcon" onClick={closeModal}><img src={require("./../../assets/exit.png")} alt="exit" /></button>
    <Container>        
          <ModalContent>
            <ModalTrash>
              <img src={trashIcon} alt="trash" height={100} width={100}/>  
            </ModalTrash>
            
            <ModalText>
              <h2>Excluir</h2>
              <p>CERTEZA QUE DESEJA EXCLUIR?</p>
            </ModalText>

            <Divider variant="middle" />

            <ModalButtons>
              <button>Excluir</button>
              <button onClick={closeModal}>Cancelar</button>
            </ModalButtons>
          </ModalContent>      
    </Container>
    </Wrapper>
  )
}

The exitIcon styles

export const Wrapper = styled.div`
.exitIcon {
  background-color: transparent;
  border: none;
  position: relative;
  left: 90%;
  bottom: 10%;
  z-index: 200;
}
`

I've tried change some properties in the React modal classes in higher levels of the exitIcon button through chrome dev tool and didn't have success in make z-index working in this specific element.

the image below is what I expect to achieve using z-index in the exit button

enter image description here

Answer 1

You are adding position: relative on the wrong element. This is what you should do

export const Wrapper = styled.div`
 position: relative;

.exitIcon {
  --icon-size: 20px;  //can be whatever you decide
  width: var(--icon-size);
  height: var(--icon-size);
  background: orange;
  color: white;
  border: none;
  border-radius: 50%;
  position: absolute;
  right: calc((var(--icon-size)/ 2) * -1);
  top: calc((var(--icon-size)/ 2) * -1);
}
`