HTML5 内联视频忽略 z-index

Question

我有一个内联 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> 标签通过其 'raw code' 小部件手动插入到 WPBakery 构建器中，因此我可以随意修改它，以及 CSS，尽管到目前为止无济于事。

非常感谢任何正确方向的指示。

Answer 1

.vc_row.vc_row-flex > .vc_column_container > .vc_column-inner {
    z-index: 0;
}

这解决了重叠问题。我的猜测是社交按钮的固定位置使其脱离了正常的堆叠上下文，因此 z-index 没有像您预期的那样工作。很难说，因为我确定您使用的 CMS 会为某些事情自动生成 HTML 和 CSS。

HTML5 内联视频忽略 z-index

HTML5 inline video ignores z-index

css

z-index

html5-video