Shopify Dawn主题下如何让SVG加号显示在Tab右侧而非父容器最右侧

问题核心原因 #

你定义的加号span使用了绝对定位，但承载加号的直接父容器（h2.accordion__title、button）未设置position: relative，导致绝对定位的加号会向上查找最近设置了相对定位的上层元素（也就是你代码里的summary）作为偏移基准，最终两个加号都会定位到整个外层容器的最右侧，和你设置的Tab宽度无关。

修复方案 #

你只需要调整以下CSS规则即可：

/* 新增：给加号的直接父容器加相对定位，作为加号的定位基准 */
.accordion__title {
  position: relative;
  width: 100%;
}

/* 修改：调整加号的定位规则，相对于所属Tab的标题区域右对齐 */
.info-additions-tab span {
  position: absolute;
  width: 18px;
  height: 18px;
  /* 垂直居中对齐标题 */
  top: 50%;
  transform: translateY(-50%);
  /* 距离标题右侧0位置，可根据需求调整边距 */
  right: 0;
}

/* 新增：两个Tab平分父容器宽度，可根据需求调整占比 */
.accordion summary > .summary__title {
  flex: 0 0 50%;
}

/* 移除原有冲突的宽度规则：info-additions-tab button.benefits { width:50% } */

修改后两个加号会分别对齐到所属Tab的右侧，不会再出现错位问题。如果你需要两个Tab垂直排列，只需给summary添加flex-direction: column规则，同时将上面的flex: 0 0 50%改为flex: 0 0 100%即可。

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