顶部导航固定占六十四像素，Tab 到页面中部的输入框时，浏览器把元素滚到视口顶端，正好被顶栏压住，只看得到一条边，用户以为焦点丢了。第一次遇到会往复杂处想，其实漏掉的多是个小前提。
:root{--header-h:64px}
html{scroll-padding-top:calc(var(--header-h) + 12px)}
.header{position:fixed;top:0;height:var(--header-h)}
滚动定位默认贴到视口边缘，没有把固定定位的顶栏算进去。元素确实获得了焦点，可见部分却被遮住，键盘用户只能盲按。这一点先确认清楚，后面就不用反复试。
「焦点被顶栏遮挡」相关的日志我一般连着看前后五分钟，单看一条报错经常判断不出是哪一步失败。临时改动用注释写上日期和原因，过两周自己都记不清为什么这么写。
具体做法是，给根元素设 scroll-padding-top，值等于顶栏高度加一点余量；顶栏高度用变量维护，改样式时只改一处；锚点跳转和 focus 滚动都验证一遍，两者用的是同一套滚动偏移。
改完照着核一遍，Tab 到页面中部任意输入框，整个控件完整露在顶栏下方，不再被压住一半。