我有一个内嵌HTML5视频,它忽略了z-index
,并显示在位置较高的元素上。我已经尝试了所有可以找到的解决方案和建议,例如明确定位元素并设置z-index
,但无济于事。
简化结构如下:
<div class="content">
<div class="row 1">
<bunch of other divs>
<div class="product_socials_wrapper">
links
</div>
</bunch of other divs>
</div>
<div class="row 2">
<bunch of other divs>
<video>
</video>
</bunch of other divs>
</div>
</div>
.product_socials_wrapper {
position: fixed;
z-index: 999;
}
.row2 .column .column-inner {
z-index: 1;
}
.product_socials_wrapper
div总是浮在所有其他元素上方,但<video>
除外。即使在视频的直接父包装上,也没有问题。仅在<video>
距左侧足够近以与.product_socials_wrapper
div重叠的宽度上可见,例如1300px宽。此外,如果我将视频替换为图像,而不更改任何其他代码,问题就会消失。所以我想这不是代码中的堆叠错误。
您可以在Chrome和Firefox here中看到此内容。这是一个使用WordPress和WPBakery Page Builder构建的实时网站。.product_socials_wrapper
是主题的一部分,因此我对其HTML没有太多控制。<video>
标签通过其“原始代码”小部件手动插入WPBakery构建器中,因此尽管到目前为止仍然无济于事,我仍可以随意修改它以及CSS。
任何朝正确方向的指针都会受到赞赏。
.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner {
z-index: 0;
}
这解决了重叠问题。我的猜测是,社交按钮的固定位置使它脱离了正常的堆叠上下文,因此z-index的工作不像您预期的那样。很难说,因为我确定您使用的CMS会为某些事情自动生成HTML和CSS。