用flex布局使＜img＞和＜video＞元素重叠并重合显示

        接到需求，页面要显示手机播放视频的效果，那么就需要让手机边框img图片和视频video两个元素重叠并重合显示。先上效果图如下：

        可以使用Flex布局来实现`<img>`和`<video>`元素的重叠。Flex布局是一种非常强大的布局方法，它可以轻松地使子元素重叠。以下是如何使用Flex布局来使两个元素重叠的示例：
        

<div style="display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 300px;">
  <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;" src="path-to-your-image.jpg" alt="描述">
  <video style="width: 100%; height: 100%; z-index: 2;" src="path-to-your-video.mp4" autoplay loop controls></video>
</div>

        
        在这个示例中，`<div>`容器使用了Flex布局，并且设置了`justify-content`和`align-items`属性，以确保子元素水平和垂直居中。`<img>`和`<video>`元素都被设置为绝对定位，并且它们的宽度和高度都被设置为100%，以覆盖整个容器。`object-fit: cover;`属性确保图片在不失真的情况下覆盖整个容器。最后，`z-index`属性用于控制堆叠顺序，使得`<video>`元素位于`<img>`元素之上。
        请注意，由于自动播放的视频可能会受到浏览器自动播放策略的限制，特别是在移动设备上，你可能需要用户与页面进行交互（例如点击）才能触发视频播放。