position: fixed是实现固定左侧侧边栏的唯一可靠方案，但必须同步设置top: 0、left: 0、显式宽高、overflow-y: auto，并为右栏预留margin-left，同时在响应式下动态调整或收起。
固定左侧侧边栏不是“设个 position: fixed 就完事”，关键在三点：是否真需要“永远不随页面滚动”、主内容是否被遮挡、小屏下怎么收起。大多数场景下，position: fixed 是对的，但必须同步处理高度、滚动、留白和响应式退场逻辑。
为什么 position: fixed 侧边栏一滚动就遮底或错位？
常见现象是：侧边栏能固定，但页面拉到底部时，它盖住页脚；或者内容少时，侧边栏直接撑出视口下方空白。根本原因是没约束它的渲染上下文。
-
height: 100vh只保证初始高度，但若页面总高 > 100vh，fixed 元素不会自动延伸——它本就不参与文档流 - 没给
html, body { height: 100% }，100vh在某些旧浏览器或缩放场景下会失效 - 侧边栏内部内容超长却没限制高度，
overflow-y: auto失效——必须显式设max-height: 100vh或用top: 0; bottom: 0配合overflow-y: auto - 主内容区只靠
margin-left留白，但 fixed 侧边栏宽度变化时（比如响应式缩窄），margin-left没同步更新，导致重叠或留白过大
主内容区该用 margin-left 还是 flex？
优先用 display: flex 布局容器，而不是给主内容加 margin-left。后者耦合太强，一旦侧边栏宽度动态变化（比如点击展开二级菜单），就必须 JS 手动改 margin，容易漏或错。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器设
display: flex，侧边栏设flex: 0 0 240px（不伸缩、不收缩、基础宽 240px） - 主内容区设
flex: 1，自动占满剩余空间，宽度随侧边栏变化实时响应 - 如果仍需
position: fixed，就把侧边栏从 flex 容器里拿出来，单独定位，主内容区再用margin-left——但此时必须用 CSS 自定义属性（如--sidebar-width: 240px）统一管理宽度，并在媒体查询中同步更新
小屏下侧边栏收起，为什么 transform: translateX(-100%) 不生效？
最常踩的坑是：只写了 transform，却忘了父容器没设 overflow: hidden，导致侧边栏滑出去后仍可被拖拽看到；或者 JS 切换 class 时，没确保 transition 触发。
立即学习“前端免费学习笔记（深入）”；
- 包裹侧边栏的外层容器（比如
<aside></aside>的父<div>）必须设 <code>overflow: hidden - 侧边栏自身要设
transition: transform 0.3s ease，且不能被更高级别的!important覆盖 - JS 控制开关时，不要直接写
element.style.transform = 'translateX(-100%)'，而应切换 class：sidebar.classList.toggle('is-collapsed')，CSS 中定义.is-collapsed { transform: translateX(-100%); } - 移动端点击收起后，记得
document.body.style.overflow = 'hidden'防止背景滚动；展开后恢复为auto -
sticky必须有明确的滚动容器（比如设了overflow-y: auto的父级），否则行为不可控 - IE11 完全不支持
sticky，如需兼容，只能回退到 JS 滚动监听 + 动态切fixed -
sticky在<table> 内部几乎必失效，因为表格渲染模型会截断其定位上下文 <p>真正难的不是写那几行 CSS，而是想清楚：这个侧边栏在不同设备、不同内容长度、不同滚动深度下，应该呈现什么行为。固定 ≠ 无脑钉死，它得有边界、有退路、有 fallback。</p> </table>
要不要用 position: sticky 替代 fixed？
要看需求。如果侧边栏只需“滚动到顶部后才固定”，比如文章页的目录导航，position: sticky 更自然、无需手动预留空间、也不遮页脚。但它不适用于需要“一进页面就钉死左上角”的场景（如后台管理系统的导航）。
