How to position a router-outlet component as the top layer of the window?

I'm building a layout in an Angular app that looks like this:

<app-navbar></app-navbar>
<div class="router-wrapper">
    <router-outlet></router-outlet>
</div>

My issue is that I have a sidebar inside the componets loaded inside the <router-outlet>, this sidebar should be placed on top of everything on the screen; but no matter what I do with z-index or position absolute it always shows "behind" the navbar on top; can this be actually done?

Solution

Example

Your wrapper cannot be position other than static if it is it becomes root for z-indexes for its children.

As an alternative, I would suggest using grid layout and push your topbar as part of layout controlled by the route (if you do that for sidebar why not for all).

Further explanation of how z-index and its context works