layui后台布局实现header和nav双固定需基于layui-layout-admin结构，为header设fixed+top:0+width:100%+z-index:1000，side设fixed+top:60px+width:200px+height:calc(100vh-60px)+z-index:999，并为body预留margin-left:200px和margin-top:60px。
要让 Layui 后台布局中的顶部 Header 和左侧 Nav（侧边栏） 同时固定不动、不随内容滚动，核心是利用 CSS 的 position: fixed 或 position: sticky，并确保结构层级、尺寸控制和层叠关系正确。Layui 自带的 layui-layout-admin 已为此做了基础封装，但默认并不自动启用“双固定”，需手动补全关键样式与布局细节。
1. 使用 Layui 标准布局结构
必须基于官方推荐的 admin 布局容器，否则 flex 布局逻辑会错乱：
<div class="layui-layout layui-layout-admin"> —— 这个外层容器不可省略，它是 Layui flex 布局的根<li>内部按顺序写：<code><div class="layui-header">、<code><div class="layui-side">、<code><div class="layui-body"> <h3>2. 为 Header 和 Side 分别设置 fixed 定位</h3> <p>直接给两个区域加 <code>position: fixed不够——它们会脱离 flex 流，导致右侧内容区错位。正确做法是：- 保留
.layui-header默认的position: relative（或不设），但额外加position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; - 给
.layui-side加position: fixed; top: 60px; left: 0; width: 200px; height: calc(100vh - 60px); z-index: 999;（其中 60px 是 header 高度，根据实际调整） - 务必为
.layui-body预留空间：加margin-left: 200px; margin-top: 60px;，避免被遮挡
3. 处理层叠与遮挡问题
fixed 元素容易被后续相对定位的区块覆盖，常见于底部 footer 或 banner 区域：
- 检查是否有父容器设置了
position: relative且未设z-index，这会创建新层叠上下文，压住 header/side - 统一提升关键区域的
z-index：header ≥ 1000，side ≥ 999，body 内容保持 auto 即可 - 为 header 添加背景色（如
background: #2f4050）和阴影（box-shadow: 0 2px 4px rgba(0,0,0,.1)），增强视觉分离
4. 更现代的替代方案：用 sticky + flex 配合
如果兼容性允许（Chrome 56+/Firefox 59+/Safari 15.4+），可放弃 fixed，改用更轻量的
position: sticky：.layui-header { position: sticky; top: 0; z-index: 1000; }.layui-side { position: sticky; top: 60px; height: calc(100vh - 60px); }- 保持
.layui-layout-admin的 flex 布局不变，无需手动计算 body 边距 - 优势：不脱离文档流，响应式更自然，滚动性能更好，且无 fixed 带来的 body 预留空间管理麻烦
不复杂但容易忽略。关键是结构不能乱、高度要算清、z-index 要管住。用好 Layui 的类名基础，再补几行精准 CSS，双固定就稳了。
- 保留
