ThreeJS Globe点击弹出卡片z-index层级异常问题求助

• 先做好基础DOM层级设置：

  • 给ThreeJS渲染的canvas元素设置较低的z-index（比如z-index: 1），同时给canvas加上定位样式（position: relative或absolute）——z-index仅对定位元素生效。
  • 如果点位是DOM元素，把它们的z-index设为比卡片低的数值（比如z-index: 50），确保卡片能覆盖所有点位。

• 动态提升当前激活卡片的层级：
  维护一个全局计数器记录当前最高层级，每次打开卡片时递增计数器，将当前卡片的z-index设为这个值，保证新打开的卡片永远在最顶层。示例代码：

  // 全局变量，初始值设为比canvas和点位的z-index都高
  let currentMaxZIndex = 100;
  
  // 点击点位触发的卡片显示函数
  function openInfoCard() {
    // 创建或获取目标卡片元素
    const card = document.querySelector('.info-card') || document.createElement('div');
    card.classList.add('info-card');
    // 必须设置定位，z-index才会生效
    card.style.position = 'fixed'; // 或absolute，根据布局需求选择
    // 提升当前卡片层级
    currentMaxZIndex++;
    card.style.zIndex = currentMaxZIndex;
    // 其他卡片内容、位置设置...
    document.body.appendChild(card);
  }
  

• 避免父容器层级限制：
  不要把卡片挂载在有z-index设置的局部容器里，直接挂载到body标签下，这样卡片的z-index是相对于整个页面的，不会被父容器的层级约束影响。

• 排查其他干扰样式：
  确认卡片和其父元素没有设置overflow: hidden导致卡片被裁剪，也没有transform、filter这类会创建新堆叠上下文的属性（这类属性会让z-index的作用范围被限制）。

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