一个连搜索都找不解决办法的问题！我发现了nextjs-demo项目的问题根源并解决！

本问题应该属于CSS问题。有好几个版本，我从最开始搜问题到最终确定原因：

1. css中配置position: fixed会导致**滚动条被遮挡**该怎么解决？ 【这个问题只有一个相关文章（2021年）但始终没有解决方法）

2. 为什么有些滚动条在HTML文档上层，有些在下层？ 【可以看下面截图：1是掘金网站的，2是仿掘金项目demo版】

1

2

第二个问题能看懂吧？就是我的顶部栏设置成`position: fixed;`后，就会遮挡滚动条。

两个问题都是一样的，我当时还是仿掘金网站的写法做的，所以这个fixed也是要加的。

甚至我还开了3D视图来观察两者之间的区别。

（这些过程是无用的）

但最后我思考了，是body标签的问题嘛？是`__next`这个id的标签问题嘛？【`__next`标签是根标签】

我点开看了：

怀疑起来了！！

我把属性取消掉，遮挡就不存在了，但是滑动不了了。

再一看body标签：`overflow: hidden;`

好家伙，就是这个。我把上面的属性都取消了。就默认回body的`overflow:auto;`了，然后滚动条不被遮挡了，也可以正常滑动了。

---

下面来分析一下：

因为__next标签设置了高度，当overflow时，就会出现滚动条（**仅仅是该标签的**）。所以当该标签里面有元素设置成fixed时，就会脱离原来文档，遮挡住滚动条（当然例子中元素的宽度要够宽才遮挡）。

当body不再做`overflow: hidden;`设置了，原来的文档流高度就不会限制死了，body也就会出现原来应该出现滚动条了。

---

bytheway 可能其他框架下实现的效果也是和demo一样的。我不能评论它们好不好，但是我是遇见了这个问题，也通过这个方式解决了，说明还是要按照需要来走，比如改改根标签的设置。

---

顺带一提，我还发现掘金网站的顶部导航条模块是与标签模块分开写的，文章列表等版心内容竟然用margin控制好的布局。。emm

我这个标题取得...