如何让滚动时Google Icons置于导航栏后方？

问题核心是元素堆叠层级冲突：你的导航栏用了sticky定位，但未设置z-index，滚动时页面下方的图标元素会覆盖导航栏。只需给导航栏添加z-index属性，让它的层级高于其他元素即可。

修改后的CSS代码：

#navbar {
  overflow: hidden;
  background-color: #151b54;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100; /* 添加这行，确保导航栏处于最上层 */
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100; /* 如果这个类实际被使用，同样添加z-index */
}

i.material-icons {
  position: relative;
  top: 4.5px;
  padding: 2px;
  padding-right: 6px;
}

/* only to simulate scrolling */
#tri>div~div {
  padding-bottom: 2000px;
}

z-index控制元素的堆叠顺序，数值越大，元素视觉上越靠上。设置一个足够大的数值（比如100），就能让导航栏始终显示在页面其他内容上方，滚动时不会被图标或其他元素覆盖。

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