Starligh

I have a page that has a fixed logo in the upper left corner.  The navigation bar runs behind the logo with a few drop-down menu items.  On the gallery page is the thumbnail background and a modal cover to blow up the images for viewing.  I can't seem to get the layout to work right.  When I set the nav bar to position: [anything] it comes to the top, covering the logo, even thought the z-index is less than the logo.  It's the same situation with the modal - the nav bar comes up on top of it even though the z-index is less.  Here's the code.    If I take the position attribute off of the nav bar, it falls into place with the logo, but the drop down menus fall behind the center-section-gallery section and can't be accessed.  Any ideas?

nav { 
    height: 60px;
    width: 100%;
    margin:0;
    padding: 0;
    background: #da002b;
    background-image: linear-gradient(to bottom, #da002b, #730000);
    position: relative; (I get the same reaction whether this is fixed, absolute; or relative)
    z-index: 100;
}

. logo{
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    z-index: 99;
}
 

.section-center-gallery{     [this is the div with the thumbnails]
    position: relative;
    width: 75%;
/*    height: 100vh;*/
    padding: 20px;
    padding-bottom: 140px;
    margin: -0 auto 0 auto;
    background-color: #f9f0d8;
    z-index: 1;
}
 

.modal {            [this is the pop-up slide show]
  display: none;
  position: fixed;
  z-index: 50;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

Which class should have the position property?

Here's how I have it right now.

nav { 
    height: 60px;
    width: 100%;
    margin:0;
    padding: 0;
    background: #da002b;
    background-image: linear-gradient(to bottom, #da002b, #730000);
    z-index: 100;
}

. logo{
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    z-index: 99;
}
 

.section-center-gallery{     [this is the div with the thumbnails]
    position: relative;
    width: 75%;
/*    height: 100vh;*/
    padding: 20px;
    padding-bottom: 140px;
    margin: -0 auto 0 auto;
    background-color: #f9f0d8;
    z-index: 1;
}
 

.modal {            [this is the pop-up slide show]
  display: none;
  position: fixed;
  z-index: 50;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

Even with this, the drop down options fall behind the div with the thumbnails.  No other divs have a z-index. Thanks.

I've run into a problem.  I'm using your lightbox coding on our website (and it works great!), but I've run into an issue with the drop-down navigation.  With everything set up the way it's supposed to be, the drop-down nav drops behind the thumbnail div.  I've tried various ways to bring it to the top, but they all prevent the slideshow from launching.  Got any ideas?