如何修复CSS Grid覆盖粘性Navbar的问题？

问题修复方案 #

核心是通过调整**堆叠层级（z-index）**解决覆盖问题，完全不需要修改.grid-item的position: relative（这个属性是Overlay实现定位的必要条件）：

1. 给粘性Navbar的容器（nav ul）添加z-index属性，设置一个足够大的值，确保它始终处于Overlay上方：

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    top: 0;
    width: 100%;
    position: fixed;
    z-index: 999; /* 新增：提升Navbar层级 */
    background-color: white; /* 可选：添加背景色，防止内容透过Navbar显示 */
}

2. 保留.grid-item的position: relative，Overlay的悬停效果不会受到任何影响。

原因说明 #

• Fixed定位的元素默认z-index: auto，不会创建特殊的堆叠上下文；而position: relative的.grid-item会生成自己的堆叠上下文，其子元素（Overlay）的层级会基于这个上下文计算。当页面滚动时，Grid项移动到Navbar位置时，Overlay的层级会超过Navbar，导致覆盖。
• 给Navbar设置更高的z-index后，它会强制处于所有内容的最上层，彻底解决覆盖问题。

更优实现建议 #

1. 简化Overlay样式：用inset: 0替代冗余的top/bottom/left/right和height/width设置：

.overlay {
    position: absolute;
    inset: 0; /* 等价于top:0; bottom:0; left:0; right:0; */
    opacity: 0;
    transition: .5s ease;
    background-color: lavender;
}

2. 简化Grid布局代码：用统一的gap属性替代grid-column-gap和grid-row-gap：

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    gap: 20px; /* 同时设置行列间距 */
}

3. 修复HTML小错误：你的第一个图片标签class="image1>缺少闭合引号，修改为class="image1"，避免潜在的渲染问题。

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