Shopify部署ParticleJS背景时canvas层级错位显示异常求助

你遇到的画布错位本质是HTML结构嵌套错误+层叠上下文设置逻辑混乱，具体两个核心问题：

1. 把{{ content_for_layout }}（Shopify实际页面内容）和粒子画布共同嵌套在#particles-js容器内部，同个父级下的DOM元素默认靠书写顺序决定显示层级，后写的内容会自动盖住前面的画布元素，这就是为啥必须手动把canvas挪到内容前面才能显示正常。
2. 给#particles-js和内部canvas设置了负z-index，导致整个粒子容器被压到页面基础层后面，哪怕结构对了也会被页面本身的背景遮挡。
   另外你的CSS里还存在语法错误：vertical-align: top:的冒号位置写错，会直接导致该条样式失效。

1. 修正HTML结构 #

把粒子背景层和实际页面内容拆成平级的兄弟节点，不要互相嵌套，正确结构参考：

<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
  <!-- 粒子专属容器，只留空即可，不需要手动写canvas标签（ParticleJS会自动生成插入） -->
  <div id="particles-js"></div>
  <!-- 实际店铺内容单独做包裹层，和粒子容器平级 -->
  <div class="site-content-wrapper">
    {{ content_for_layout }}
  </div>
</main>
{% section 'footer' %}

注意：不需要手动在#particles-js里写<canvas>标签，库初始化时会自动在目标容器内创建对应画布，手动写反而会生成重复的画布元素，进一步加剧层级错位。

2. 替换错误的CSS代码 #

用下面的代码覆盖原来的样式，解决层叠和定位问题：

/* 粒子背景容器 */
#particles-js {
  position: fixed; /* 用固定定位让它脱离文档流，铺满整个视口当全局背景 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 不要用负z-index，设为0保证在所有非定位内容的上层 */
  z-index: 0;
  background-color: #bbbbbb;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  /* 移除原来的relative定位和负z-index */
}

/* 库自动生成的画布样式 */
#particles-js canvas {
  display: block;
  vertical-align: top; /* 修正原来的语法错误 */
  width: 100%;
  height: 100%;
  /* 移除原来的绝对定位和负z-index，父级已经是独立定位层，不需要单独给画布设定位 */
}

/* 实际页面内容的样式，保证显示在粒子层上方 */
.site-content-wrapper {
  position: relative; /* 触发层叠上下文 */
  z-index: 1; /* 层级高于粒子容器，自动显示在粒子效果上层，不需要手动调整DOM顺序 */
}

3. 额外排查点 #

• 引入particles.min.js脚本时，要保证在DOM加载完成后再调用初始化方法，不要把script标签夹在页面内容中间，可以放到全局底模板的script引入区域。
• 不要给#particles-js设置任何会形成嵌套层叠上下文的属性（比如负z-index、opacity小于1等），不然会把内部的实际内容一起压到最底层，出现按钮点不动、文字被遮挡的布局问题。

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