使用 z-index 更改 div 可见性答案

【问题标题】：Changing div visibility with z-index使用 z-index 更改 div 可见性
【发布时间】：2023-03-21 22:15:02
【问题描述】：

我正在开发一个单页网站。我有几个默认隐藏的 HTML5 视频，当单击链接时，它们会显示在覆盖（模态）框中。

目前我只是用 JS 显示和隐藏它们，但是 "display: none;"一旦显示，页面加载似乎会导致视频控件出现问题...

因此，为了避免完全隐藏视频，我想将它们重新排列在主要内容后面，并使用 z-index 将每个视频放在前面。我不担心旧浏览器的 z-index 问题。

有没有一种简单的方法可以用 JQuery 做到这一点，还是我必须编写一个自定义函数？

【问题讨论】：

【解决方案1】：

您可以使用 jQuery 轻松设置 z-index 属性：

$('#video1').css('z-index', '10');

确保在文档准备好后触发 jQuery。

【讨论】：

【解决方案2】：

使用jQuery设置zIndex

$('#video1').css('zIndex', '100');

【讨论】：

【解决方案3】：

试试

visibility:hidden;

而不是

display:none;

【讨论】：