如何通过CSS解决新增SVG图标被前置标签元素遮挡的问题

问题原因 #

你当前遇到的SVG被遮挡，核心是堆叠上下文层级优先级问题：
z-index仅在同一个堆叠上下文内生效，你给子元素.quick-popup-icon设置的z-index:1是相对于父容器.auto-time-popup-span的层级。但父容器没有显式设置z-index，默认堆叠优先级和普通流元素一致，如果前置遮挡区块设置了position属性且z-index≥0，就会覆盖父容器及内部所有元素，哪怕子元素z-index设置得再高也不会生效。

修复方案 #

调整父容器的堆叠优先级，同时优化SVG定位逻辑避免布局偏移，修改后的完整代码如下：

CSS代码

.auto-time-popup-span {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 新增：提升父容器整体层级，数值可根据遮挡区块的z-index调整到更高即可 */
  z-index: 999;
  /* 新增：创建独立堆叠上下文，避免外部层级影响内部元素 */
  isolation: isolate;
  /* 新增：右侧预留空间放置SVG，避免和后续行内内容重叠，可按需调整数值 */
  padding-right: 25px;
}

.quick-popup-icon {
  position: absolute;
  margin-left: 0;
  /* 定位到父容器右侧，替代之前的负margin逻辑 */
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0px 4px 12px -2px rgb(128 128 128 / 35%);
  border-radius: 50%;
}

HTML代码无需修改，保持原有结构即可：

<span data-value="8 a.m. PT" class="auto-time-popup-span">
     <span style="background-color:#f5f7c6;">8 a.m. PT</span>
<svg width="30" class="quick-popup-icon"></svg>
</span>

如果调整后仍存在遮挡，只需继续调高.auto-time-popup-span的z-index数值，确保大于遮挡区块的z-index值即可解决问题。

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