Starligh Posted August 4, 2019 Share Posted August 4, 2019 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 More sharing options...
dsonesuk Posted August 4, 2019 Share Posted August 4, 2019 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now