Question

我正在尝试创建自己的灯箱。

我正在努力弄清楚如何让灯箱div出现在我的Bootstrap网格之上，因为我不知道将它放在我的html文件中的哪个位置。< / p>

我的网格看起来像这样：

<div class="container-fluid content">           
        <div class="row">   
            <div class="col-md-9"> </div>

            <div class="col-md-3"> </div>
        </div>
    </div>

这是灯箱div：

<div id="lightbox">
    <p>Click to close</p>
    <div id="content">
        <img src="#" />
    </div>
</div>

这是灯箱css的{{1}}：

div

当事件发生时，我将使用JavaScript取消隐藏我的灯箱#lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0, 0, 0, .7); text-align:center; }。目前它没有显示在Bootstrap列的顶部，我也不知道如何更改它。

Answer 1

将此CSS添加到您的灯箱样式中，以确保它位于顶部！

z-index: 9999;

Answer 2

将灯箱放在身体的顶部。将其设为：

position:fixed;top:20vw;left:30vh;width:20vh;z-index:999;

（当然，所有顶部/左侧/宽度/高度值都适合您）

见这个例子：

How to close DOM Window jquery?

Answer 3

其他答案确实有效，但可能更难跟踪，因为两者都依赖于z-index。

我发现最好尽可能少地依赖z-index，因为最终你可能有很多z-index定义，你必须开始全部跟踪它们。

所有DOM元素都会根据它们在DOM标记代码中的位置接收一个简单的z-index，这些元素最后被定义为具有“更高”的z-index（尽管没有明确定义）。这意味着标记文件“底部”的元素将出现在它之前定义的元素“上方”。

所以我建议将所有lightbox / modal类型的元素放在HTML文件的末尾。这意味着，如果您在其他任何地方都没有定义z-index，那么这些元素将在视觉上显示在顶部。

但是你也在使用Bootstrap，它为其几个组件（如navbars等）明确定义了许多z-index。但是，如果你use Bootstraps modal components，它将继承Bootstrap框架中定义的顶级z-index。

无论是将灯箱元素放在HTML文件的末尾，还是使用内置的modal组件应用Bootstrap的标准z-indexing，都应该为灯箱创建可靠的视觉分层。

灯箱div显示在Bootstrap网格上

3 个答案: