Grid z-index层级失效：单选输入列表被日历网格遮挡问题求助

问题原因 #

z-index 未生效属于堆叠上下文规则导致的常见层级异常，核心触发原因有两类：

• 给 input、label 设置的 z-index 本身无效：z-index 仅对 position 属性值为 relative/absolute/fixed/sticky 的元素生效，如果这两类元素还保留默认的 position: static 属性，无论设置多高的 z-index 都不会生效。
• 堆叠上下文隔离：如果 .calendar-wrapper 自身或者它的上级父元素设置了 transform、opacity < 1、filter、will-change、contain 等会触发新堆叠上下文的属性，那么列表元素上设置的 z-index 只会在自身所在的堆叠上下文内生效，无法跨上下文和 .calendar-wrapper 对比层级。

修复方案 #

• 优先给世纪列表的外层父容器统一设置样式：添加 position: relative; z-index: 20;，不需要给单个 input、label 分别设置 z-index，统一给外层容器设置层级兼容性更好，也能避免单个元素样式遗漏。
• 给 .calendar-wrapper 添加 position: relative; z-index: 0;，确保两个容器处于同一个堆叠上下文下，层级可以正常对比。
• 如果上述调整后仍然被遮挡，排查 .calendar-wrapper 及其所有父元素是否有触发堆叠上下文的属性，要么移除对应属性，要么调整 DOM 结构，让世纪列表容器和 .calendar-wrapper 处于同一个父节点下，再设置层级即可。

内容的提问来源于stack exchange，提问作者Eliseo D'Annunzio