aside标签仅提供语义标识，不产生侧边栏效果；其视觉位置须由CSS（如flex或grid）控制，且需嵌套在article内或与main并列于body下，禁用float和display:none，小屏应自然下移。
aside 标签只是语义容器，不等于侧边栏效果
写了 aside，内容还在主内容下方？正常。浏览器根本不认识“侧边栏”这个词，aside 默认就是块级元素，行为和 div、p 完全一样：占满整行、垂直堆叠、无定位、无浮动。它只告诉搜索引擎和屏幕阅读器“这部分是辅助内容”，布局得靠 CSS 拉出来。
常见错误是以为加了 aside 就自动靠左/靠右了。实际必须配合布局技术，比如 display: flex 或 display: grid，否则它永远老老实实待在文档流里。
-
aside应嵌套在article内（表示该文的补充），或与main并列放在body下（表示全页级辅助信息） - 别把
aside塞进header或footer里当导航用——那是nav的职责 - 如果侧边栏本质是导航链接列表，优先用
nav，不是aside；aside更适合放相关文章、广告、作者简介这类非导航辅助内容
用 flex 实现侧边栏 + 主内容并排，且不写死宽度
手动给主内容加 margin-left: 240px 是最脆弱的做法——换屏、缩放、字体变大都可能错位。flex 是目前最稳的解耦方式，让侧边栏定宽、主内容自适应。
关键不在怎么写侧边栏，而在怎么隔离它的尺寸影响：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex和min-height: 100vh（确保高度撑满视口，避免 sticky 失效） - 侧边栏加
flex: 0 0 240px（不伸展、不收缩、固定宽） - 主内容区加
flex: 1，自动占满剩余空间 - 别在父容器上设
overflow: hidden，会直接让position: sticky降级为 static
示例结构：
<div class="layout"><br> <aside class="sidebar"></aside><br> <main class="content"></main><br></div>对应 CSS：
.layout { display: flex; min-height: 100vh; }<br>.sidebar { flex: 0 0 240px; }<br>.content { flex: 1; }
让侧边栏滚动时固定在视口，sticky 不生效的三大原因
position: sticky 不是写了 top: 64px 就能粘住的。它被静默忽略的概率远高于你想象，根本原因是三个硬条件缺一不可：
- 侧边栏的**直系父容器**必须有明确滚动上下文：设
max-height: calc(100vh - 64px)+overflow-y: auto（不能是scroll或hidden） - 祖先链上任意元素不能触发新层叠上下文：避开
transform、filter、contain: layout、perspective -
top值不能超过父容器可用高度：比如父容器高 500px，设top: 600px就永远触不到临界点
调试时直接看 DevTools 的 Computed 面板，确认 position 解析结果是不是 sticky。如果显示 static 或 relative，说明上面某条被违反了。
:target 伪类能做锚点高亮，但不能替代 JS 做交互菜单
:target 只响应 URL 中的 fragment（即 #id），它本身不点击、不记忆、不响应 history API。适合静态文档目录，不适合需要展开收起或多级菜单的场景。
想让它生效，结构上必须满足：
- 每个菜单项对应一个真实存在的
id元素，且该元素有可滚动定位的高度（哪怕min-height: 1px） -
id不能挂在空的div上，否则浏览器可能跳转失败或视觉无变化 - 如果侧边栏用了
position: fixed，目标元素必须在视口内有实际位置，否则:target匹配了也不会滚动过去
典型写法是默认隐藏子菜单，用 #menu-item:target .submenu { display: block; } 触发显示——但这只适用于单次跳转，无法保存状态或联动其他项。
真正难的不是写几行 CSS，而是判断这个侧边栏到底要承载什么：是纯导航（用 nav）、辅助内容（用 aside）、还是临时抽屉（需要 checkbox hack 或 JS 控制）。选错语义标签，后面所有样式和交互都会走偏。
