网页集成p5.js时如何让前后p元素重叠iframe且保障交互正常？

• 现有代码所有定位元素均为position: relative且未设置明确z-index，渲染顺序完全遵循DOM流：排在iframe前面的顶部p，自然被后续渲染的iframe覆盖，因此出现顶部文字层级异常；排在iframe后面的底部p天然覆盖iframe，表现符合预期。
• 此前调整z-index、pointer-events未达成效果，本质是两个属性没有配合使用：要么只提高p的z-index但未控制事件穿透，导致p块完全拦截下层iframe的点击；要么只给p设置pointer-events: none但未提高层级，导致p被iframe完全遮挡，文字无法正常显示。
• 核心矛盾是需要同时满足两个看似冲突的需求：p要在视觉上浮在iframe上层，又不能完全挡住iframe的交互，仅需通过精准的样式控制即可平衡，不需要复杂的JS或DOM结构改造。

完全基于你已经接触过的z-index、pointer-events属性实现，无需改动原有DOM结构：

• 给iframe设置固定的底层z-index值，明确其被叠放的层级位置
• 给前后两个p设置高于iframe的z-index值，无论p在DOM流中的前后顺序如何，都会强制浮在iframe上层，解决顶部p被遮挡的问题
• 给p元素设置pointer-events: none，让p本身不拦截鼠标事件，p区域内的非链接部分点击会直接穿透到下层iframe，保证p5.js画布可正常操作
• 给p内部的a标签设置pointer-events: auto，恢复链接的事件响应能力，保证链接可正常跳转

将原有<style>块内的样式替换为如下内容即可生效：

#roll {
  width: 500px;
  margin: 0 auto;
}

p {
  position: relative;
  font-size: 1.5em;
  z-index: 2; /* 强制浮于iframe上层 */
  pointer-events: none; /* 自身不拦截点击事件，允许穿透到下层iframe */
}

p a {
  pointer-events: auto; /* 仅链接区域可正常响应点击 */
}

.codepoem {
  width: 500px;
  height: 200px;
}

.codepoem iframe {
  position: relative;
  width: calc(500px + 20vw);
  margin-left: -10vw;
  height: calc(200px + 40vh);
  margin-top: -20vh;
  z-index: 1; /* 作为叠放的底层元素 */
}

改动完成后可完全覆盖所有需求：

• 顶部、底部的文本均稳定浮在iframe的重叠区域，不会被画布遮挡
• 点击文本的空白区域时，事件直接穿透到下层p5.js iframe，可正常操作画布交互
• 点击文本内的链接时，正常触发跳转逻辑，不会误触发下层iframe的操作

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