滚动页面时按钮重叠sticky导航栏是什么原因？如何修复？

问题原因 #

z-index属性仅对设置了非static定位的元素生效，你当前将z-index:9999写在了nav标签上，但吸顶属性position:sticky是设置在.container容器上的，层级判定优先比对父元素的层级优先级，所以给子元素nav加的z-index不会生效，导致滚动到和设置了position:absolute的learn-more按钮重叠时，按钮层级更高。

修复方案 #

把z-index设置到设置了sticky定位的.container上即可，修改对应CSS代码如下：

.container {
  position: sticky;
  top: 0;
  position: -webkit-sticky;
  background: #FACABC;
  /* 新增这行代码 */
  z-index: 9999;
}

/* 可删除原来nav上的无效z-index配置 */
nav {
  /* 去掉下面这行即可 */
  /* z-index: 9999; */
}

内容的提问来源于stack exchange，提问作者CricketsAndCrazy