WordPress移动端调整元素后CSS遮挡、购物车点击失效问题求助

先删除你之前添加的所有相关测试CSS，避免样式冲突，再添加如下CSS代码：

/* 仅给购物车所在父容器设置层级，不全局修改container避免影响其他模块 */
.woodmart-header-cart {
  position: relative;
  z-index: 100;
}
/* 调整购物车位置，同时保证可点击属性正常 */
.woodmart-shopping-cart {
  margin-top: -80px;
  position: relative;
  pointer-events: auto;
}
/* 调整页面标题位置，层级比购物车稍低避免遮挡购物车 */
.page-title.color-scheme-light .entry-title {
  margin-top: -60px;
  position: relative;
  z-index: 99;
}
/* 处理移动端头部上层元素遮挡点击的问题 */
.site-header-mobile {
  pointer-events: none;
}
/* 恢复头部内其他可交互元素的点击权限 */
.site-header-mobile a,
.site-header-mobile button {
  pointer-events: auto;
}

问题原因说明 #

• z-index仅对position属性为relative/absolute/fixed/sticky的元素生效，你之前给元素设置z-index时未配套设置position属性，所以层级规则没有生效
• 全局给.container设置z-index会打乱全站层级逻辑，反而容易导致更多层级冲突
• 购物车无法点击是因为被上层设置了position属性的透明元素遮挡，pointer-events属性可以控制元素是否响应鼠标交互，给上层遮挡元素设置pointer-events:none即可让点击事件穿透到下层的购物车。

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