Html 如何在另一个元素（视频）上方添加div以完美覆盖它？

我有一个视频元素

<video id="interviewRecorder" width="100%"></video>

我想在相邻的DOM中添加一个div，如：

<video id="interviewRecorder" width="100%"></video>
<div id="coverIt"></div>

所以它完美地覆盖了视频。 请注意，它可能包含在复杂DOM中

我尝试了绝对定位，但没能成功

let rect = interviewRecorder.getBoundingClientRect();
jQuery('<div/>', {
    id: 'coverIt',
    css: {
        "position": "absolute",
        "top": rect.top,
        "left": rect.left,
        "width": rect.width,
        "height": rect.height,
        "background": "grey",
    }
}).insertAfter(interviewRecorder);

let rect=interviewRecorder.getBoundingClientRect（）；
jQuery（“”{
id:“coverIt”，
css:{
“位置”：“绝对”，
“top”：rect.top，
“left”：rect.left，
“宽度”：矩形宽度，
“高度”：垂直高度，
“背景”：“灰色”，
}
}).插入者（访谈记录者）；

---

看起来绝对是绝对相对定位。我不知道如何定位它的绝对/屏幕坐标。

设置

位置：相对到主体，然后将
位置：绝对
应用到div和视频元素，然后添加
z-index:10
到div和
z-index:5
到视频元素。以便
div堆叠在视频元素上方

注意：我随机保留了z-index值，您只需确保div的z-index大于video元素的z-index。
正如我上面所写的，最好通过html和css而不使用jquery或纯js。下面是一个如何使用jquery实现这一点的示例


$（函数（）{
$（'.item'）.wrapAll（''）；
});
.wrapper{
显示：内联块；
位置：相对位置；
边框：1px纯红；
}
.层{
边框：1px纯红；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
背景：红色；
不透明度：0.4；
颜色：#fff；
字体大小：3rem；
}
录像带{
显示：块；
}

测试
，在div中插入视频并将相对设置为绝对，然后将id“coverIt”设置为绝对，这不是更好吗？您需要将两者都包装在一个容器中，然后将“coverIt”div放置在其上。