元素“跳动”或“消失”是因为 position 值切换时，top/left 等偏移属性在不同定位模式下基准不同（fixed 相对视口，absolute 相对定位祖先，static 忽略偏移），且未显式重置对立方向值或适配父容器定位上下文。
用 @media 切换 position 值时，为什么元素“跳动”或“消失”？
直接在媒体查询里改 position: fixed ↔ position: absolute 或 static，容易出问题——因为 fixed 脱离文档流且相对视口定位，而 absolute 相对最近定位祖先，static 根本不响应 top/left。一旦切换，偏移值（如 top: 20px）在不同定位模式下含义完全不同，视觉上就会突兀位移甚至叠到其他内容下面。
- 确保所有
position分支都显式声明top/left/right/bottom，不要依赖默认值 - 若从
fixed切到absolute，需确认父容器有position: relative，否则absolute会往上找，可能跑到 body 顶部 - 避免在
fixed下用left: 50%+transform: translateX(-50%)居中后，在小屏切static——static下transform仍生效但布局已回归流内，位置错乱
移动端优先：小屏用 position: fixed，大屏改 absolute 怎么写？
典型场景是侧边导航栏：手机上固定在右/左边缘，桌面端嵌入主内容区右侧。关键不是“怎么写媒体查询”，而是“怎么让两个定位模式下的视觉位置一致”。
.sidebar {
position: fixed;
top: 60px;
right: 20px;
width: 280px;
}
@media (min-width: 768px) {
.sidebar {
position: absolute;
top: 80px; / 注意：这里不是复用 60px，因 header 高度可能不同 /
right: 0;
width: 240px; / 大屏常需微调宽度 /
}
.main-content {
margin-right: 260px; / 预留空间，防止内容被 sidebar 遮盖 /
}
}
-
top值要按实际布局重算，不能直接复制；固定定位的top是相对视口，绝对定位的top是相对父块，两者基准不同 - 大屏下加
margin-right比靠z-index层叠更稳妥，避免点击穿透 - 如果父容器高度动态（如含 JS 渲染内容），
absolute可能因父容器没高度而塌陷，此时需设min-height: 100vh或用display: grid约束
想让 fixed 元素在不同断点“换边”（比如从右→左→底部）
这本质是多状态定位控制，别只靠 @media 改 position 和方向属性，得同步处理尺寸、层级和交互反馈。
