Jump to content
Starligh

Navigation anjd z-index Frustration

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

Share this post


Link to post
Share on other sites

For this to work all these elements MUST be siblings, like three div containers following each other. Unless they are of the same level z-index won't work how you expect.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...