Z-индекс: фиксированный элемент находится позади относительного элемента с более низким z-индексом (и другим странным поведением)

Question

У меня есть 4 элемента, 3 из которых являются братьями и сестрами на корневом уровне: - Основной: родственник (родной брат), Z-индекс 1 - Боковая панель: фиксированная (родная), Z-индекс 2 - Заголовок: родственник (родственник), Z-индекс 3 - Всплывающее окно: исправлено (дочерний элемент Main), Z-индекс 4

Что работает: - Элемент заголовка (относительный, индекс 3) находится сверху фиксированной боковой панели (фиксированный, индекс 2), как и ожидалось - Основной находится ниже боковой панели и заголовка, как и ожидалось

Проблемы: - Всплывающее окно (фиксированное, индекс 4) отображается ниже боковой панели (фиксированное значение, индекс 2) и под заголовком (относительное значение, индекс 3), но в верхней части главной страницы (положение всплывающего окна не зависит от боковой панели).
- фиксированная боковая панель не отображается в Mobile View, но относительная Main зависит от ее теоретической ширины 3 rem.

Увеличение Z-индекса в Popup не заставляет его идти в ногу со временем.

Когда я изменяю Main на static в Mobile View, теоретическая ширина неотрисованной боковой панели не влияет на нее. (Поскольку боковая панель является позицией: исправлена, я не понимаю, почему она вообще влияет на Main).

Из моей темы (я использую стилизованные компоненты)

index: {
    main: 1,
    sidebar: 2,
    header: 3,
    popup: 4,
  }

Это контейнер макетов, который обрамляет всю страницу:

export const Layout = (props) => (
  <>  
    <Sidebar />
    <Header />
    <Main>
      {props.children} --> Popup is Child 
    </Main>
  </>
)

Я хочу, чтобы всплывающее окно было над всем, а главное не зависело от боковой панели.