https://www.hpleapfrog.cn/categories/%E5%89%8D%E7%AB%AF/ Recent content in 前端 on HpLeapfrog's Blog Hugo -- gohugo.io Sun, 20 Sep 2026 21:20:00 +0800 https://www.hpleapfrog.cn/post/2026-09-20-%E4%B8%83%E4%B8%AA%E5%8F%AF%E9%AA%8C%E8%AF%81%E7%9A%84CSS%E4%BA%8B%E5%AE%9E/ Sun, 20 Sep 2026 21:20:00 +0800 https://www.hpleapfrog.cn/post/2026-09-20-%E4%B8%83%E4%B8%AA%E5%8F%AF%E9%AA%8C%E8%AF%81%E7%9A%84CSS%E4%BA%8B%E5%AE%9E/ 技术文章里最没用的句式是「据说」和「一般来说」。 这篇文章的做法是：每条断言都配一个能在你的浏览器里当场跑的实验。你不需要相信我 —— 打开页面，实验台会自己测、自己判、把数值打出来。 实验台地址：https://www.hpleapfrog.cn/lab/css-facts/ 下文所有数 https://www.hpleapfrog.cn/post/2026-09-20-sticky%E5%A4%B1%E6%95%88%E5%86%B3%E7%AD%96%E6%A0%91/ Sun, 20 Sep 2026 21:10:00 +0800 https://www.hpleapfrog.cn/post/2026-09-20-sticky%E5%A4%B1%E6%95%88%E5%86%B3%E7%AD%96%E6%A0%91/ position: sticky 是 CSS 里看起来最简单、实际最容易翻车的属性之一。它的文档只有几句话，但失效的场景能列出一长串。 我把它失效的原因整理成了一棵可依次排除的决策树 —— 因为凭记忆排查效率很低，而这个属性的失效原因互斥且可判定，很适合做成流程。 先说 sticky 到底需要什么 一句话：它需要有”可以粘的余地