如何避免上层div受下层兄弟div的box-shadow属性影响

两个同级兄弟元素处于同一个层叠上下文时，cardCon的外阴影绘制层级高于未定位的pagCon的普通流背景层，半透明的阴影叠加在pagCon的白色背景上，就会出现视觉上的变暗效果。

方案1：提升pagCon的层叠优先级（最简便） #

给paginationContainer添加相对定位和z-index，强制让它的整体层级高于cardCon的阴影，纯白背景会完全遮挡下层阴影，不需要修改原有布局和cardCon的样式：

.paginationContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid orange;
  /* 新增以下两行 */
  position: relative;
  z-index: 1;
}

方案2：下沉cardCon的阴影层级（从根源避免影响其他元素） #

将cardCon的box-shadow移到它的绝对定位伪元素上，再把伪元素下沉到cardCon的底层，阴影只会向下/向外扩散不会影响上层元素，适合有多个上层元素都需要避开cardCon阴影影响的场景：

.projectCardContainer {
  margin: 5rem;
  width: 100rem;
  height: 30rem;
  background: #fff;
  /* 删除原有的box-shadow属性，新增以下一行 */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 30rem;
  grid-template-rows: 1fr 1fr 1fr;
}
/* 新增伪元素样式 */
.projectCardContainer::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 1px 1px 50px 5px #aaa;
  z-index: -1;
}

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