绝对定位li元素被main区域遮挡的原因及解决方案咨询

针对你遇到的两个绝对定位元素表现不一致的问题，我来拆解背后的原因和解决方案：

1. 第二个li元素被遮挡的核心原因 #

这个问题的本质是堆叠上下文和overflow-y: scroll的联动影响：

• 当元素设置overflow为非visible的值（比如scroll）时，会自动创建一个独立的堆叠上下文。这意味着#menu内部的所有元素，堆叠层级都被限制在这个容器的上下文里，无法突破到外部层级中。
• 你的第二个li元素是嵌套在ul.rel（设置了position: relative）里的绝对定位元素，它的定位参考系是这个ul，而ul又处于#menu的堆叠上下文内部，所以这个li的堆叠范围完全被锁在#menu的上下文里。
• 再看Grid布局的默认堆叠规则：#main作为Grid子元素，在HTML文档中排在#menu之后。Grid子元素的堆叠顺序遵循文档顺序——后出现的元素会被绘制在前面，所以#main的堆叠层级本身就比#menu高。
• 最终结果就是：#menu上下文里的li元素，无论怎么定位，都只能在#menu的层级范围内，自然会被层级更高的#main遮挡。

而第一个ul.abs能正常显示，是因为它没有任何定位过的父元素（#menu是默认的static定位），所以它的定位参考系是页面的初始包含块（viewport），直接脱离了#menu的堆叠上下文，属于body的上下文。作为绝对定位元素，它的堆叠优先级比static定位的#main高，所以能显示在#main上方。

2. 让第二个li显示在main上方的解决方案 #

你可以根据自己的需求选择以下方案：

方案一：提升#menu的整体堆叠层级 #

给#menu添加z-index: 1，让它的整个堆叠上下文层级高于#main：

#menu {
  grid-area: menu;
  overflow-y: scroll;
  background: #7186c7;
  color: #fff;
  padding: 1em;
  min-width: 3em;
  z-index: 1; /* 新增这一行 */
}

这样#menu内部的所有元素（包括那个li）都会被提升到#main上方，完美保留滚动功能。

方案二：让li元素脱离#menu的堆叠上下文 #

如果不需要li相对于ul.rel定位，可以去掉ul.rel的position: relative，或者给body添加position: relative，让li的定位参考系变成body：

body {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas: "logo header" "menu main" "footer copyright";
  background: #f1f4fd;
  font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
  font-size: 1em;
  color: #777d8b;
  position: relative; /* 新增这一行 */
}

此时li会脱离#menu的上下文，直接属于body的堆叠层级，作为绝对定位元素，它会自动显示在static的#main上方。不过你可能需要调整li的left/top值来适配新的定位参考系。

方案三：调整overflow属性（限场景） #

如果#menu的内容大多时候不会超出容器，可以把overflow-y: scroll换成overflow-y: auto——只有当内容超出时才会触发滚动并创建堆叠上下文。不过这个方案仅适用于内容较少的场景。

补充：为什么移除overflow-y:scroll后就正常了？ #

当#menu的overflow是默认的visible时，它不会创建堆叠上下文。此时，li元素虽然定位在#menu外部，但它的堆叠层级属于body的上下文，和#main处于同一层级。而绝对定位元素的堆叠优先级天生高于static定位的元素，所以li会被绘制在#main上方，自然不会被遮挡。

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