如何对元素进行z索引，使其高于包含元素的元素

Question

我在网页上使用了Zurb's Off Canvas Layout和Galleria的组合。

Zurb的布局用于一般结构，Galleria创建了一个可以切换到全屏的照片查看器。

HTML基本上就像这样（简化）：

<section role="complementary" style="z-index: 2;"> Sidebar Content </section>
<section role="main" style="z-index: 1;">
    <div id="galleria"> [small images here, no problem with these]
        <div class="fullscreen" style="width: 100%; height: 100%; z-index: 999;">
            [fullscreen images go here, the sidebar appears above them]
        </div>
    </div>
 </section>

由于全屏图像容器（z-index：999）包含在比补充更低的z-index主要内容中，因此在全屏模式下查看图像时，互补的侧边栏会出现在图像上方。

我宁愿不改变我正在使用的这些技术，也希望有人能够解决这个问题。

我已经看到了discouraging post，但也许有人知道他们不知道的事情？

Answer 1

你必须定位元素。使用position:absolute，position:relative或position:fixed作为您的元素.fullscreen