html - 与其将 Lightbox 置于一切之上，不如将其置于相对位置并将一切向下推

Question

与其写下确切的代码，我想问一个概念性的 html/css/js 问题。通常，灯箱通过使用 z-index 放置在页面上所有内容的顶部来工作。如果您不希望灯箱位于其他所有内容之上怎么办？而是将页脚向下推，为新内容腾出空间。我的直觉告诉我，如果您创建相同的 z-index，并使定位相对，它应该将所有其他 div 向下推。然而，这并不是很有效。

我正在尝试实现以下目标: 用户单击缩略图，将页脚向下推并在页面中央打开一个包含一些内容的新 div。如果他们决定按“X”，它会关闭 div，返回到原始缩略图，将页脚移回页面。

我认为使用灯箱，修改代码是最快捷、最简单的方法。但是我可能会把这一切都错了。有什么想法吗？

谢谢。

Answer 1

z-index 仅用于相互堆叠的元素。对于您要实现的目标，情况似乎并非如此。

您需要将灯箱放在页脚和内容之间，并将其设置为最初隐藏，并且每当用户单击缩略图时使用 javascript/jquery 显示模态:

$(".thumb").click(function(){
    $(".modal").slideToggle()
})

这是一个简单的演示:

fiddle