在视频元素中添加子 div，不显示

Question

我的目标是在每个视频元素上都有文字（有很多）。视频正在显示，但其中的 div 没有显示。

<video autoplay playsinline style="transform: rotate(0deg); width: 100%; height: 100%; position: relative">
  <div style="width: 100px; height: 30px; color: white; z-index: 1; position: absolute; top: 0px; left: 0px; background: green;">test</div>
</video>

在元素检查器中，当我将鼠标悬停在 div 上时，它不会在页面上的任何位置显示一个框。怎么让它显示出来？

Answer 1

视频元素内部不能包含元素，除非该video标签不受支持。这是显示错误消息解释浏览器不支持video.

将您video的元素放入一个元素（如 a div）并将其添加div到它旁边，作为video元素的兄弟元素而不是子元素。使用position里面放置：

<div style="position: relative;">
  <video autoplay playsinline style="transform: rotate(0deg); width: 100%; height: 100%; position: relative"></video>
  <div style="width: 100px; height: 30px; color: white; z-index: 1; position: absolute; top: 0px; left: 0px; background: green;">test</div>
</div>

请确保您发布完整的代码，以确保我们可以为您提供适当的帮助。