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?