如何将FabricJS Canvas置于视频上方？设置absolute无效问题

核心问题是父容器未设置相对定位，导致canvas的绝对定位基准不是视频容器，再加上FabricJS自动生成的canvas-container样式干扰，才出现canvas被视频压在下面的情况。按以下修改即可解决：

具体实现步骤 #

• 给#videoKit添加position: relative，让内部绝对定位元素以它为参照
• 调整FabricJS生成的容器和canvas的z-index，确保层级高于视频
• 同步视频与canvas的尺寸，避免交互区域错位

修改后的完整代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<style>
  #videoKit {
    position: relative; /* 关键：设置相对定位 */
    display: inline-block; /* 容器适配视频尺寸 */
  }
  #video {
    display: block;
    width: 500px;
    height: 500px;
  }
  /* 覆盖FabricJS默认容器样式 */
  #canvas-container {
    position: absolute !important;
    left: 0;
    top: 0;
    z-index: 10; /* 确保层级高于视频 */
  }
  #canvas-container canvas {
    z-index: inherit;
  }
</style>
<div id="videoKit">
  <video id="video" controls preload="metadata">
    <source
      src="https://media.istockphoto.com/id/1760658147/fr/vid%C3%A9o/prise-de-vue-par-drone-de-dauphins-nageant.mp4?s=mp4-640x640-is&k=20&c=y9709pLK1KmLp1FZRzkKd8Pmx4xurbRqAK6RWKLSapc="
      type="video/mp4"/>
  </video>
  <canvas id="canvas"></canvas>
</div>

<script>
  var canvas = new fabric.Canvas('canvas', {
    width: 500,
    height: 500
  });

  // 添加测试图形验证效果
  var rect = new fabric.Rect({
    left: 50,
    top: 50,
    width: 100,
    height: 100,
    fill: 'rgba(255,0,0,0.5)'
  });
  canvas.add(rect);
</script>

关键细节说明 #

• #videoKit的position: relative是基础，没有这个canvas的绝对定位会相对于整个页面，而非视频容器
• !important用来强制覆盖FabricJS默认给canvas-container设置的样式，确保它能绝对定位在容器内
• z-index:10保证canvas容器层级高于视频（视频默认z-index为0）
• 统一视频和canvas的宽高，避免后续在canvas上的操作区域和视频画面错位

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