Question 192997 in CSS Question posted in
Some basic documentation can be found here.

Css – Using z-index between fixed positioned and relative positioned boxes

As I designed an UI/UX design for my website, I got a problem with using z-index-CSS-Property.

My main page is only a fixed picture and as you start scrolling, a white box is going to cover that main picture, but navbar is still above main content. When you continue scrolling and after you finish reading contents and you see footer, footer will cover navbar now. it means that navbar is above main picture and also main content. but it should NOT cover the footer:

#footer {
    z-index: 1000;
}

#navbar {
    z-index: 10;
}

I defined navbar as LAST tag in my body and it’s going to cover picture and main content correctly. but footer is LAST tag in MAIN CONTENT. because its going to be shown when you continue scrolling the main content. as you may be understood now, navbar covers / is above footer…

Any Idea to fix that?

If you think I can tell you more details, comment that 🙏🏻

html,body {
        margin: 0;
        padding: 0;
}

#body {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background-image: url(https://i.redd.it/u6mkl0evh2521.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
}

#scrollable_content {
        position: absolute;
        top: 100vh;
        right: 0;
        left: 0;
        width: 100vw;
        z-index: 9;
}

#scrollable_content #main_content {
        position: relative;
        width: 100vw;
        min-height: 100vh;
        background-color: #F4FFFF;
}

#navbar {
        display: flex;
        position: fixed;
        top: 22px;
        right: 3.5vw;
        left: 3.5vw;
        width: 93vw;
        height: 3rem;
        background-color: rgba(240, 254, 255, 0.3);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid #FFF5;
        border-radius: 20px;
        flex-flow: row nowrap;
        z-index: 10;
}

#footer {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: stretch;
        background-color: #09353E;
        width: 100vw;
        height: 100vh;
        z-index: 1000;
        position: relative;
}

#footer>h1 { color: #4BBACD }

::-webkit-scrollbar {
        height: 5px;
        width: 5px;
}

::-webkit-scrollbar-track {
        background-color: #F4FFFF;
}

::-webkit-scrollbar-thumb {
        background-color: #ACE6EF;
        border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
        background-color: #09353E;
}
<html>
<body>

<main id="body"></main>
<article id="scrollable_content">
  <div id="main_content">
  
  <!-- content -->
  
  <h1>Main Content</h1>
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis fugiat nesciunt dolor eos incidunt animi consequatur nemo blanditiis, fuga tempora asperiores ipsum reprehenderit eius sed maxime repellat hic impedit similique doloribus assumenda a! Esse, distinctio? Vel, labore. Pariatur at ex ipsum deserunt vero sunt tempora officiis, quas odio a eveniet quia non doloribus nobis assumenda nemo quibusdam mollitia culpa? Animi pariatur consectetur quisquam provident delectus soluta aliquam est, eveniet quas facere tenetur. Voluptatem accusantium adipisci quod consectetur id deserunt quo? Et similique aliquam molestias omnis? Vitae hic impedit quidem, molestias nostrum accusantium labore. Natus impedit nemo, veritatis alias accusamus culpa.  

  <br>
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis fugiat nesciunt dolor eos incidunt animi consequatur nemo blanditiis, fuga tempora asperiores ipsum reprehenderit eius sed maxime repellat hic impedit similique doloribus assumenda a! Esse, distinctio? Vel, labore. Pariatur at ex ipsum deserunt vero sunt tempora officiis, quas odio a eveniet quia non doloribus nobis assumenda nemo quibusdam mollitia culpa? Animi pariatur consectetur quisquam provident delectus soluta aliquam est, eveniet quas facere tenetur. Voluptatem accusantium adipisci quod consectetur id deserunt quo? Et similique aliquam molestias omnis? Vitae hic impedit quidem, molestias nostrum accusantium labore. Natus impedit nemo, veritatis alias accusamus culpa. 
  
  <br>
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis fugiat nesciunt dolor eos incidunt animi consequatur nemo blanditiis, fuga tempora asperiores ipsum reprehenderit eius sed maxime repellat hic impedit similique doloribus assumenda a! Esse, distinctio? Vel, labore. Pariatur at ex ipsum deserunt vero sunt tempora officiis, quas odio a eveniet quia non doloribus nobis assumenda nemo quibusdam mollitia culpa? Animi pariatur consectetur quisquam provident delectus soluta aliquam est, eveniet quas facere tenetur. Voluptatem accusantium adipisci quod consectetur id deserunt quo? Et similique aliquam molestias omnis? Vitae hic impedit quidem, molestias nostrum accusantium labore. Natus impedit nemo, veritatis alias accusamus culpa.  
  
  </div>
  
  <footer id="footer">
  
  <h1>Footer goes here</h1>
  
  </footer>
</article>
<nav id="navbar"></nav>

</body>
</html>
Tags:

2

Answers


  1. 0

    Have you tried using position: sticky instead of fixed and relative?

    nav {
  position: sticky;
  top: 0;
  height: 3em;
  background-color: dodgerblue;
  }

main {
  height: 50vh;
  background-color: slateblue;
  }

footer {
  position: sticky;
  height: 100vh;
  background-color: firebrick;
  }
    <nav>Navigation</nav>
<main>Content</main>
<footer>Footer</footer>
    Login or Signup to reply.
  2. 0

    Because the footer is inside #main_content, it only has as much z-index as the main content in relation to the navbar. So you need to set a z-index on the main content that is higher than the z-index of the navbar for the footer to cover the navbar. (Because you haven’t shown the HTML, I’m only assuming the navbar is outside the main content container.)

    The current high z-index of the footer only operates in relation to the nearest positioned parent element, which is presumably the #main_content container.

    Another complication, though, is that you want the contents of main_content to go under the navbar, so that presents another problem. So my advice would be to place the footer outside main_content and give it a higher z-index than the navbar. You can’t have the footer covering the navbar if it’s inside the main content and you want the rest of the main content to sit under the navbar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search