Css

背景：给 PaperMod 博客做「左侧悬浮目录」时，从 fixed 迁移到 sticky，系统梳理了 position 的完整体系。 一、一句话总纲 position 决定了一个元素"相对于谁、用什么规则来定位"。 CSS 里有 5 个值（其中 4 个常用）。它们最大的区别，就在两个问题： 参照物是谁 —— 相对自己？相对祖先？相对屏幕？ 会不会脱离文档流 —— 原来的位置还占不占？ 二、先理解前提：什么是「文档流」 网页元素默认从上到下、从左到右自然排列，像写字一样一行行排下来。 这个「自然的排列规则」就叫文档流（normal flow）。 默认情况（position: static），所有元素都待在文档流里，一个接一个。 position 的很多值，本质就是"让元素脱离这个自然流，然后相对某个参照物重新定位"。 三、五个值逐个拆解 1. static（默认值） .element { position: static; } 所有元素的默认状态，不写 position 就是它。 元素乖乖待在文档流里，按顺序排列。 top / left / right / bottom 这些偏移属性对它无效。 一句话：就正常排着，别动我。 2. relative（相对定位） .element { position: relative; top: 10px; left: 20px; } 相对它自己原来的位置偏移。 关键点 1：仍然占着原来的位置（不脱离文档流，坑还在）。 关键点 2：top: 10px = 从原位置往下挪 10px；left: 20px = 往右挪 20px。 一句话：我人挪了，但原来的座位还给我留着。 ...

背景：做博客「左侧目录」的窄屏适配时，用到了 @media 让目录在窄屏下隐藏/缩小。这里系统记录媒体查询是什么、怎么用。 一、媒体查询是什么 一句话：媒体查询（Media Query）是 CSS 里的一种"条件判断"，让某些样式只在"满足特定条件"时生效。 最常用的条件是"屏幕宽度"，但也可以是设备类型、屏幕方向（横屏/竖屏）、是否支持某功能等。 它和编程里的 if 语句是同一个思想： /* 如果屏幕宽度 ≤ 1200px，就应用里面这些样式 */ @media (max-width: 1200px) { .toc-sidebar { display: none; } } 这等价于（用伪代码表达）： 如果 (屏幕宽度 <= 1200px) { 隐藏 .toc-sidebar } 二、@media 的基本语法 结构是固定的，记住这个骨架： @media 条件 { 选择器 { 属性: 值; } } @media 是关键字 括号里写"条件" 花括号里写"满足条件时要应用的样式" 里面的写法和普通 CSS 完全一样 三、最常用的宽度条件 1. max-width（小于等于某个宽度时生效） @media (max-width: 768px) { /* 屏幕 ≤ 768px（手机）时生效 */ } 记忆：max-width = “最多就这么宽”，所以是**“小屏时生效”**。 2. min-width（大于等于某个宽度时生效） @media (min-width: 1200px) { /* 屏幕 ≥ 1200px（大屏）时生效 */ } 记忆：min-width = “至少这么宽”，所以是**“大屏时生效”**。 ...

背景：给 PaperMod 博客做「左侧悬浮目录」，在做窄屏适配时，发现 position: fixed 方案越补越复杂，进而推导出 position: sticky 才是正解。 一、问题的本质：两个"参照系"打架 当前目录用的是 position: fixed，正文是居中布局。这导致了根本矛盾： 元素 定位方式 参照系 目录 .toc-sidebar position: fixed 整个浏览器窗口（屏幕） 正文 .post-content 居中 + max-width 屏幕正中央的固定宽度容器 两个元素各自用不同的参照系定位，所以： 屏幕很宽时，两者刚好不重叠（纯属运气） 屏幕变窄时，正文的"左右留白"缩小，目录（相对屏幕固定）就会压到正文 结论：用 fixed 就注定要"打补丁"——写一堆媒体查询去"猜"什么宽度下会重叠。这是治标不治本。 二、为什么"缩小距离/缩小宽度/隐藏"是补丁，不是解法 一开始设想的"三步判断"逻辑： 屏幕够宽 → 目录浮在正文旁 二者贴在一起 → 缩小目录宽度 还不行 → 隐藏目录 这个逻辑方向是对的，但用媒体查询实现时，本质是在**“手动模拟"本应由浏览器自动完成的事**： 你得猜“多少像素下会重叠”（是 1200？1300？1400？） 每猜一次，就要加一个 @media 断点 屏幕尺寸无穷多，断点也写不完 换个设备、换个分辨率，又得重调 这就是"补丁式"响应式的通病：永远在追赶，永远有漏网之鱼。 三、position: sticky 为什么是正解 sticky 解决的是**“参照系统一”**这个根本问题。 fixed 和 sticky 的本质区别 属性 定位参照系 表现 position: fixed 相对屏幕 永远钉在屏幕某个位置，与页面内容无关 position: sticky 相对父容器 在父容器范围内"跟随滚动”，超出范围就正常流动 sticky 如何从根上避免"重合" 如果目录用 sticky，并且放在正文容器的左侧（作为正文布局的一部分），那么： ...