Html 用div元素覆盖视频元素

我试图用一系列div元素覆盖视频元素，但由于某种原因，div元素出现在div元素本身的下方，而不是div元素上

解决这个问题的最佳方法是什么：

。视频项目持续时间容器{
用户选择：无；
-webkit点击突出显示颜色：透明；
颜色：#fff；
背景色：#000；
-webkit字体平滑：抗锯齿；
字号：8px；
字体大小：400；
显示：内联flex；
线高：16px；
位置：绝对位置；
底部：4px；
左：4px；
}
.视频项目按钮容器{
用户选择：无；
-webkit点击突出显示颜色：透明；
-webkit字体平滑：抗锯齿；
字号：1rem；
显示：内联块；
颜色：#fff；
高度：16px；
字母间距：.6px；
线高：16px；
字号：700；
文本转换：大写；
空白：nowrap；
过渡：背景色。15秒轻松进出；
大纲：无；
边界半径：8px；
填充：0 6px；
右侧填充：5.7px；
光标：指针；
边界：0；
保证金：0；
背景色：rgba（14,19,24,7）；
}
.视频

3:20

您需要为叠加元素设置高于视频的

z索引