我在网页上使用了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,但也许有人知道他们不知道的事情?
答案 0 :(得分:0)
你必须定位元素。使用position:absolute
,position:relative
或position:fixed
作为您的元素.fullscreen