使用 z-index 更改 div 可见性

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

使用 jQuery 设置 zIndex

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

Answer 3

尝试

visibility:hidden;

代替

display:none;