position: relative导致父div遮挡粘性头部、模态框等元素，有什么更优解法？

最优解决方案推荐 #

你遇到的堆叠遮挡问题核心是相对定位元素如果误设置了z-index，或者内部绝对定位元素的z-index溢出到全局堆叠上下文导致的，下面两个方案都可以从根本上解决问题，不需要修改原有头部、模态框的z-index配置：

方案1：使用CSS Grid实现叠加效果（最推荐，无需定位）

完全不需要给父元素设置position: relative，用Grid的同区域叠加特性就能实现图片和hover文本的层叠效果，不会产生任何额外的堆叠上下文干扰：

.avatar-card {
  width: 你的容器宽度;
  height: 你的容器高度;
  display: grid;
}
/* 图片和hover文本都放在同一个网格单元格 */
.avatar-card > img,
.avatar-card > .hover-text {
  grid-area: 1 / 1 / -1 / -1;
}
/* hover文本样式 */
.hover-text {
  display: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  /* 垂直水平居中 */
  place-items: center;
}
.avatar-card:hover .hover-text {
  display: grid;
}

方案2：给相对定位父容器设置独立堆叠上下文

如果你一定要用定位实现，只需要给父容器加一行isolation: isolate，就能创建独立的堆叠上下文，内部绝对定位元素的z-index只会在当前容器内生效，不会和页面其他元素的z-index产生冲突：

.avatar-card {
  width: 你的容器宽度;
  height: 你的容器高度;
  position: relative;
  /* 新增这行即可 */
  isolation: isolate;
  /* 注意：不要给这个父容器设置任何大于0的z-index，保持默认auto即可 */
}
.hover-text {
  position: absolute;
  inset: 0; /* 等价于top:0;right:0;bottom:0;left:0; */
  z-index: 1; /* 这个值只在当前容器内生效，不会影响外部元素 */
}

额外排查点

如果以上方案生效不明显，先检查你是不是之前不小心给这个相对定位的父容器设置了大于0的z-index，去掉多余的z-index配置即可。

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