Angular中Router-outlet未显示在Navbar下方的问题排查

你给Navbar外层div添加的absolute定位类是核心问题——绝对定位的元素会脱离正常文档流，页面不会为它预留空间，导致<router-outlet>渲染的内容从页面顶部开始布局，被悬浮在上方的Navbar完全遮挡。

提供三种实用的解决方式，你可以根据需求选择：

方式1：给路由容器添加上内边距 #

计算Navbar的实际高度（比如你的Navbar包含p-6的上下内边距，高度大概在4-5rem左右），给<router-outlet>的父容器添加上内边距，避开Navbar的区域：
修改app.component.html：

<app-navbar></app-navbar>
<div class="pt-20"> <!-- 数值根据Navbar实际高度调整，比如pt-16/pt-24 -->
  <router-outlet></router-outlet>
</div>

方式2：替换Navbar的定位方式 #

如果不需要absolute，可以改用sticky定位——它会让Navbar固定在顶部，但仍保留在文档流中，页面会自动为它预留空间，不会遮挡下方内容：
修改Navbar组件的外层div：

<div class="sticky top-0 z-50 bg-gradient-to-b from-orange-400 to-[#e1d471]">
  <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
    <!-- Logo 及其他导航内容 -->
  </nav>
</div>

方式3：给路由出口添加上外边距 #

直接给<router-outlet>设置上外边距，值等于Navbar的高度：
修改app.component.html：

<app-navbar></app-navbar>
<router-outlet class="mt-20"></router-outlet> <!-- mt值按需调整 -->

内容的提问来源于stack exchange，提问作者Dan ndongi