React多HTML Video组件三点菜单定位异常问题求助

渲染多个HTML video标签播放视频时，点击任意视频的三点菜单按钮，菜单并未显示在触发按钮附近，而是固定出现在最后一个视频的三点按钮位置。已为组件添加唯一ID、key及父容器key，新项目测试仍存在该问题，此前用模态框实现视频放大播放时也有类似错位情况。

简化代码 #

import React from 'react';

const VideoPlayer = ({ src, id }: {src: string; id: number}) => {
  return (
    <div id={`videodiv-${id}`}>
      <video className="w-[230px] h-[250px] object-cover rounded-lg" id={`video-${id}`} controls src={src}></video>
    </div>
  );
};

const Test = () => {
  const videos = [
    { src: '/icons/1.mov', id: 1 },
    { src: '/icons/2.mp4', id: 2 },
    // Add more videos as needed
  ];

  return (
    <div>
      {videos.map((video) => (
        <VideoPlayer key={video.id} src={video.src} id={video.id} />
      ))}
    </div>
  );
};

export default Test;

问题截图 #

视频菜单错位显示

1. 给每个视频容器添加独立定位上下文 #

浏览器原生video控件的菜单默认基于最近的position: relative元素定位，若所有视频容器都没有设置定位，菜单会统一绑定到最后一个符合定位条件的元素上。修改VideoPlayer的外层div：

<div id={`videodiv-${id}`} style={{ position: 'relative' }}>
  <video className="w-[230px] h-[250px] object-cover rounded-lg" id={`video-${id}`} controls src={src}></video>
</div>

2. 避免浏览器复用原生控件DOM #

部分浏览器会复用video的控件弹窗DOM（比如三点菜单），而非为每个视频单独创建。添加playsInline属性可以强制浏览器为每个视频生成独立的控件上下文：

<video 
  className="w-[230px] h-[250px] object-cover rounded-lg" 
  id={`video-${id}`} 
  controls 
  src={src}
  playsInline
></video>

3. 排查全局CSS冲突 #

检查是否有全局样式设置了overflow: hidden或异常的z-index，导致菜单被遮挡或错位。确保每个视频的父容器没有影响定位的溢出属性，必要时为容器设置独立的z-index层级。

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