Bootstrap 5 has reserved a $zindex-fixed: 1030; variable which places elements below the $zindex-modal: 1055;. It took me a while to wrap my head around but this actually helped me solve this same issue in my Vue project. My child component also has the modal inside it, whereas the element that I want to be "above everything else … but not modals" I just assign this variable to.

@use 'bootstrap' as bs;

.my-fullscreen {
  position: fixed;
  z-index: bs.$zindex-fixed;
  // …
}