自定义cursor div始终位于video下方无法置顶，设置z-index无效如何解决？

问题核心为堆叠上下文（Stacking Context） 渲染优先级异常，可按以下步骤逐一排查修复：

• 第一步：检查.cursor元素的所有父级节点，只要任意父级存在以下属性，都会创建独立堆叠上下文，导致子元素的z-index仅在父级内部生效，父级整体层级低于video时，cursor自然无法上浮：
  • opacity 值小于1
  • 设置了transform、filter、perspective、mask属性
  • will-change值为opacity、transform等
  • isolation属性设置为isolate
    解决方式是要么移除父级的上述属性，要么直接将.cursor元素移到<body>标签的直接子节点位置，避免父级堆叠上下文影响。
• 第二步：修复浏览器原生video元素的层级渲染异常
  部分浏览器对video元素的硬件加速渲染会默认提升其层级优先级，你可以给.cursor添加GPU加速标记强制提升层级，同时给video添加背景色避免透明渲染异常，修改对应CSS规则如下：

  .cursor {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #000 !important;
    mix-blend-mode: difference;
    transition: padding .4s;
    position: fixed;
    z-index: 99999 !important; /* 提升优先级，加!important避免被其他规则覆盖 */
    pointer-events: none;
    transform: translateZ(0); /* 强制开启GPU渲染提升层级 */
  }
  
  #home-vd {
    position: relative;
    z-index: 10;
    background: #000; /* 避免video透明渲染异常 */
  }
  

• 第三步：优化JS逻辑（可选）
  你已经在CSS中给cursor设置了fixed定位和z-index，JS里不需要重复设置行内样式，仅更新坐标即可，避免行内样式和CSS规则冲突：

  var crs = document.querySelector('.cursor');
  document.addEventListener('mousemove', (e) => {
    var ds1 = e.clientX - crs.clientWidth / 2;
    var ds2 = e.clientY - crs.clientHeight / 2;
    crs.style.left = `${ds1}px`;
    crs.style.top = `${ds2}px`;
  })
  

• 第四步：验证实际生效的z-index值
  打开浏览器开发者工具，选中.cursor元素，查看「计算样式」面板中的z-index实际值，如果不是99999，说明有其他更高优先级的CSS规则覆盖了该属性，找到对应规则调整即可。

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