Css 位置渲染

我有一个简单的导航栏，上面有

位置：sticky

，滚动时显示不清晰，一切正常，然后它就在顶部。

从上面的图像中可以看到，似乎存在一些渲染问题。以下是css：

正文{
/*用于演示目的*/
高度：300vh；
}
* {
字体系列：RobotoThin；
保证金：0；
填充：0；
溢出x：隐藏；
大纲：无；
-webkit转换：1s；
过渡：1s；
框大小：边框框；
背景重复：无重复；
过渡：0.5s！重要；
滚动行为：平滑；
}
分区窗口{
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
框大小：边框框；
填充：计算（2vh+2vw）；
高度：100vh；
宽度：95vw；
位置：绝对位置；
右：0；
排名：0；
显示：无；
空白：nowrap；
显示器：flex；
-ms-flex-wrap:wrap；
-webkit柔性包装：包装；
柔性包装：包装；
背景色：#ecf0f1；
左边距：5vw；
}
#帮助{
显示：块；
过渡：0s！重要；
}
分区#帮助{
高度：200vh；
空白：正常；
}
帮帮{
颜色：红色；
文字装饰：无；
}
导航{
排名：0；
位置：粘性；
显示器：flex；
证明内容：之间的空间；
颜色：黑色；
背景色：白色；
垫顶：1V最大；
垫底：1V最大；
字体大小：1.2vmax；
柔性包装：包装；
边界半径：10em；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
}
分区导航>a{
颜色：黑色；
}
div#nav>*：悬停{
颜色：金色；
字母间距：0.3vw；
}
div#nav>：第一个孩子{
左边距：1vw；
}
div#nav>：最后一个孩子{
保证金权利：1vw；
}

一般重要信息桌面数学计算器注释电池报价设置密码和数据

经过多次摆弄，罪魁祸首是：

overflow-x：隐藏；

正文{
/*用于演示目的*/
高度：300vh；
}
* {
字体系列：RobotoThin；
保证金：0；
填充：0；
/*溢出x：隐藏的；a{
颜色：黑色；
}
div#nav>*：悬停{
颜色：金色；
字母间距：0.3vw；
}
div#nav>：第一个孩子{
左边距：1vw；
}
div#nav>：最后一个孩子{
保证金权利：1vw；
}

一般重要信息桌面数学计算器注释电池报价设置密码和数据