Z-Index: Fixed element is behind relative element with lower z-index (and other weird behavior)

Question

I have 4 elements, 3 of which are siblings on root level: - Main: relative (sibling), Z-index 1 - Sidebar: fixed (sibling), Z-index 2 - Header: relative (sibling), Z-index 3 - Popup: fixed (child of Main), Z-index 4

What works: - Header (relative, index 3) element is on top of the fixed Sidebar (fixed, index 2) as expected - Main is below Sidebar and Header as expected

Problems: - Popup (fixed, index 4) is rendered below the Sidebar (fixed, index 2) and below the Header (relative, index 3), but on top of Main (position of Popup is not affected by the Sidebar).
- the fixed Sidebar is not rendered in Mobile View, but relative Main is affected by its theoretical width of 3 rem.

Increasing the Z-index of Popup does not make it go on top of everything.

When I change Main to static in Mobile View, the theoretical width of the non-rendered Sidebar does not affect it. (Since the Sidebar is position: fixed I do not understand why it affects Main at all).

From my theme (I am using Styled Components)

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

This is the Layout Container which frames the entire page:

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

I want Popup to be on top of everything and Main to be unaffected by the Sidebar.