Как расположить розетку маршрутизатора как верхний слой окна?

Question

Я создаю макет в приложении Angular, которое выглядит следующим образом:

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

Моя проблема в том, что у меня есть боковая панель внутри компонентов, загруженных в <router-outlet>, эта боковая панель должна располагаться поверх всего на экране; но независимо от того, что я делаю с z-index или абсолютным положением, он всегда показывает «позади» панель навигации вверху; это действительно может быть сделано?

Answer 1

Пример

Ваша оболочка не может быть позицией, отличной от static, если она становится корнем для z-index для своих дочерних элементов.

В качестве альтернативы я бы предложил использовать сетку и толкнуть верхнюю панель как часть схемы, управляемой маршрутом (если вы делаете это для боковой панели, почему не для всех).

Дальнейшее объяснение того, как работает z-index и его контекст

Answer 2

Это можно сделать. Если вы используете правильные стили для элемента, он должен быть размещен в верхней части страницы. Если вы не использовали какое-либо значение z-индекса или абсолютную позицию для навигационной панели, то вам просто может потребоваться сделать позиции: абсолютные и z-индекс: 10 для компонента sidemenu, чтобы опередить другие элементы. Если вы используете какое-либо значение z-index для навигационной панели, то вам нужно установить более высокое значение z-index, чем nav-bar для боковой панели.