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

时间:2012-12-18 07:34:24

标签: css z-index galleria zurb-foundation

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

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,但也许有人知道他们不知道的事情?

1 个答案:

答案 0 :(得分:0)

你必须定位元素。使用position:absoluteposition:relativeposition:fixed作为您的元素.fullscreen