而不是Lightbox在所有东西之上，使它相对并推动一切

Question

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

我正在努力实现以下目标：用户点击缩略图，按下页脚并在页面中心打开包含部分内容的新div。如果他们决定按“X”，它会关闭div，返回原始缩略图，将页脚移回页面。

我认为使用灯箱，修改代码将是最快捷，最简单的方法。但是，我可能会犯这个错误。有什么想法吗？

谢谢。

Answer 1

z-index仅用于堆叠在彼此之上的元素。对于您正在尝试实现的目标，似乎并非如此。

您需要将灯箱放在页脚和内容之间并将其设置为最初隐藏，并且每当用户点击thumnail时，都会使用javascript / jquery显示模式：

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

这是一个简单的演示：

fiddle