How to take an element outside the modal window

Ionic Framework Ionic React
1

Hi, I need help, how can I move my div outside the content of the modal window, I need the block with the inscription to be slightly higher than my modal sheet, but at the same time follow the changes in the height of the modal window

Снимок экрана от 2024-07-08 12-27-51

My modal component

import './TicketModal.css'
interface TicketModalProps {
  open: boolean
  data: any
  onClose: () => void
}

const TicketModal: FC<TicketModalProps> = ({ open, onClose, data }) => {
  return (
    <IonModal
    id="ticket_modal"
      isOpen={open}
      onDidDismiss={onClose}
      
      initialBreakpoint={0.75}
      breakpoints={[0, 0.25, 0.5, 0.75]}
    >
      <IonContent  id="ticket_content">
      <div className="bg-red-700 z-50 absolute w-full top-[2px] left-0">CONTENT</div>
       
      </IonContent>
    </IonModal>
  )
}

export default TicketModal

CSS

ion-modal#ticket_modal{
    --width:80%;
    --border-radius:20px;
    overflow: visible !important;
}
ion-modal#ticket_modal::part(handle){
    display: none;
}
ion-modal#ticket_modal::part(backdrop){
    overflow: visible !important;
}
ion-modal#ticket_modal::part(content){
    overflow: visible;
    
    mask-image: 
    radial-gradient(ellipse 50px 45px at left 50% , #0000 30px, #000 0),
    radial-gradient(ellipse 50px 45px at right 50%, #0000 30px, #000 0);
    mask-composite: intersect;
}

ion-content#ticket_content{
    --background: #ffdc1a;
}
2

Solved the problem it was necessary to change --overflow:visible for ion-modal,and I also used mask image for the shadow dom content, and it hide the content outside, I decided to change the background to transparent, and inside I created a div container that is displayed with the desired color, and everything works well