本文详解如何将 Granim.js 生成的动态 Canvas 背景无缝嵌入带外边距（如 margin: 30px）的容器中，通过 CSS 定位策略（相对定位 + 绝对定位 或 CSS Grid）实现 canvas 始终作为内容底层背景，无需手动计算绝对坐标。
本文详解如何将 granim.js 生成的动态 canvas 背景无缝嵌入带外边距（如 `margin: 30px`）的容器中，通过 css 定位策略（相对定位 + 绝对定位 或 css grid）实现 canvas 始终作为内容底层背景，无需手动计算绝对坐标。
要使动态渲染的 <canvas> 元素（如由 Granim.js 驱动的渐变动画）真正成为某个内容容器（例如 .wrapper）的视觉背景，关键在于建立正确的层叠上下文与定位参照系。由于 canvas 是动态绘制的，无法转为静态图片（toDataURL() 失效），且其父容器（如 <main>）存在 margin: 30px 等偏移，直接对 canvas 设置 position: absolute; top: 0; left: 0 会使其相对于视口而非父容器定位，导致错位。
✅ 推荐方案一：相对定位 + 绝对定位（语义清晰、兼容性好）
将 .wrapper 设为 position: relative，为其创建新的定位上下文；再将内容元素（如 <h1>）设为 position: absolute，并指定 top: 0; left: 0 —— 此时它的定位基准就是 .wrapper 的内边框，而非整个页面。而 <canvas> 保留在文档流中（或设为 position: absolute 并同样锚定至 .wrapper 四角），即可自然铺满容器内部区域：
.wrapper {
position: relative; /* 创建定位上下文 */
padding: 2rem; /* 可选：为内容预留内边距 */
}
.granim-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* 确保置于内容之下 */
}
.wrapper > h1 {
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 1; /* 确保文字在 canvas 之上 */
}⚠️ 注意：需确保 .granim-wrapper 和 <h1> 同级或合理嵌套，并移除 canvas 的 display: block 对 z-index 的干扰（z-index 仅对定位元素生效）。
✅ 推荐方案二：CSS Grid 重叠布局（现代、声明式、易维护）
利用 Grid 的层叠能力，让 canvas 和内容共享同一网格单元，天然实现“堆叠”效果，无需关心定位值：
.wrapper {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
/* 可选：显式定义网格区域提升可读性 */
grid-template-areas: "bg";
}
.granim-wrapper {
grid-area: bg;
z-index: -1;
}
.wrapper > h1 {
grid-area: bg;
align-self: center;
justify-self: center;
z-index: 1;
}此方式下，无论 .wrapper 如何偏移（margin、transform 或嵌套深度变化），canvas 与内容始终在同一个逻辑空间内对齐，响应式适配更稳健。
? 额外优化建议：
- 在 JavaScript 中仍需保留 resizeCanvas() 逻辑，但目标应改为 .wrapper 元素尺寸（而非 main），以匹配 CSS 定位范围：
function resizeCanvas(canvas: HTMLCanvasElement) { const wrapper = document.querySelector('.wrapper') as HTMLElement; canvas.width = wrapper.clientWidth; canvas.height = wrapper.clientHeight; } - 避免给 <canvas> 设置 z-index: -1 同时又未设置 position（如 relative/absolute），否则无效；务必配合定位属性使用。
- 若使用 grid 方案，注意浏览器兼容性（IE 不支持，但现代项目基本无碍）。
两种方案均规避了手动调用 getBoundingClientRect() 计算偏移的繁琐逻辑，兼顾健壮性与可维护性——核心思想是：让 canvas 与前景内容共享同一坐标系，而非各自面向视口。
