Jump to content

Navigation anjd z-index Frustration


Starligh

Recommended Posts

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...