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>标签是通过其“原始代码”小部件手动插入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

1 个答案: