滚动页面时图片及按钮覆盖导航栏、文本显示正常，如何修复该问题？

修复方案 #

这个问题是层叠上下文优先级导致的，按以下两步修改即可：

1. 给导航栏CSS添加足够高的z-index属性，因为z-index只有在定位元素（非static）上才生效，你已经给#navbar设置了sticky定位，直接补层级即可：

#navbar{
    align-items: center;
    display: flex;
    top: 0px;
    position: sticky;
    background: transparent;
    z-index: 999; /* 新增这一行，值只要比其他元素的z-index高即可 */
}

2. 你注释掉的JS代码不需要启用，它本身有两个错误：

• document.getElementsByClassName返回的是元素集合，不能直接批量设置style属性
• JS中操作CSS的z-index属性需要用驼峰写法zIndex，不能直接写z-index

原因说明

你已经给#service-container设置了z-index: -1，所以容器层级在导航栏下方，但容器内的图片、按钮因为设置了transform属性，会自动创建独立的层叠上下文，优先级高于没有设置z-index的sticky定位导航栏，所以才会出现容器在下方、内部元素飘在导航栏上方的情况，给导航栏固定高z-index即可一次性解决所有元素覆盖导航栏的问题。

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