0

我在页面上使用了Zurb 的 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 main 中，因此在全屏模式下查看图像时，互补侧边栏会出现在图像上方。

我宁愿不改变我正在使用的这些技术，并希望有人有一个 CSS 解决方案来解决这个问题。

我已经看到了一个令人沮丧的帖子，但也许有人知道他们不知道的事情？

4

1 回答 1

0

您必须定位元素。将position:absolute, position:relative, orposition:fixed用于类中的元素.fullscreen

于 2012-12-18T08:51:24.873 回答