CSS position:sticky属性不生效 导航栏无法吸顶是什么原因？

• 父元素设置了overflow非visible的属性
  如果header的任意一级父元素设置了overflow: hidden、overflow: auto或者overflow: scroll，会破坏sticky的滚动定位上下文，导致属性失效。
• 父元素高度与header高度一致
  sticky元素的滚动生效范围被限制在父元素的内容高度内，如果父元素高度刚好等于header的高度，header没有滚动空间就不会触发粘滞效果。
• 存在新的CSS层叠上下文干扰
  如果header的任意一级父元素设置了transform、perspective、filter、will-change: transform等属性（值不为none），会创建新的层叠上下文，导致sticky元素相对于该父元素而非视口定位，表现为不固定。
• 缺少浏览器私有前缀
  部分老旧版本的webkit内核浏览器（比如旧版Safari、部分移动端浏览器）需要添加-webkit-sticky私有前缀才会生效，可修改属性配置为：

div.header{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #0d0c09;
  padding: 10px;
  height: auto;
  margin: 0px;
}

• 被其他层级元素遮挡
  如果页面后续元素的z-index值高于header，就算sticky属性已经生效，也会被上层元素盖住，肉眼看起来没有固定，可给header添加z-index: 999提升层级验证。
• 浏览器兼容性问题
  IE全版本都不支持sticky属性，如果需要兼容IE需要改用position: fixed方案配合JS实现。

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