如何修复confetti彩带动画仅在屏幕底部显示无法覆盖全屏的问题

你的彩带无法全屏显示是两个样式缺失共同导致的：

1. 动态创建的#confetti-canvas默认使用static静态定位，作为普通节点追加到body末尾时，会排在header、main等所有页面内容的后方，位置落在页面内容底部，不会悬浮覆盖整个视口。
2. 代码只设置了canvas的内部位图尺寸等于窗口宽高，没有设置canvas元素本身的CSS宽高，canvas会按浏览器默认值渲染为300px宽、150px高的小块，无法铺满屏幕。

只需要修改confetti.js中创建canvas时的内联样式，补全定位和宽高属性即可。
找到原有创建canvas样式的代码段：

canvas.setAttribute(
  'style',
  'display:block;z-index:999999;pointer-events:none'
);

替换为以下代码：

canvas.setAttribute(
  'style',
  'position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;z-index:999999;pointer-events:none'
);

新增的样式作用：

• position:fixed：让canvas脱离普通文档流，不再跟随页面内容排列到页面底部
• top:0;left:0：将canvas左上角对齐视口左上角
• width:100vw;height:100vh：让canvas元素的CSS尺寸和视口宽高完全一致，和已经设置的内部位图尺寸匹配，不会出现缩放、显示不全的问题
• 原有pointer-events:none属性可以保证canvas不会拦截页面的点击、输入操作，不影响页面正常交互。

修改完成后重新触发彩带动画，彩带会从整个屏幕顶部区域生成并下落，完整覆盖整个视口，不会再只出现在屏幕底部。现有代码中已经绑定了window resize事件调整canvas位图尺寸，窗口大小变化时动画也会自适应全屏。

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