0

I'm using a combination of Zurb's Off Canvas Layout and Galleria on a page.

Zurb's layout is used for the general structure and Galleria creates a photo viewer that can be switched to full-screen.

The HTML is basically like this (simplified):

<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>

Since the full-screen images container (z-index: 999) is contained in a lower z-index main than the complementary , when viewing the images in full-screen mode, the complementary sidebar appears above the images.

I would much rather not change these technologies I'm using and hoping someone has a CSS solution to this problem.

I already saw a discouraging post, but maybe someone knows something they don't?

Community
  • 1
  • 1
Adal
  • 606
  • 7
  • 12

1 Answers1

0

You have to position the element. Use position:absolute, position:relative, or position:fixed for your element with the class .fullscreen

SKeurentjes
  • 1,848
  • 12
  • 18