Search code examples
cssuser-interfacenavbarz-indexfooter

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>

Solution

  • The only thing that needs to be done to achieve the desired result with your provided code is to remove z-index: 9; from #scrollable_content

    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; */ /* This is the simple solution */
}

#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>


    However, your markup has a lot of unnecessary CSS and bad semantic structure (I suggest reading the MDN article Document and website structure.)

    In this example, I have provided a better semantic structure and commented out the unneeded CSS declarations. The only containers that need positioning are nav (to be fixed in place) and footer (relative only to be able to use z-index to overlay nav.) The only container that needs z-index is footer. The #scrollable_content container isn't needed.

    I realized that the background color for #main_content wasn't being rendered in the top margin of the h1. I thought this was odd, especially since there isn't a collapsing margin from another element. I added 1px top padding to #main_content to fix this issue.

    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;
  background-attachment: fixed;
}

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

#main_content {
  padding-block-start: 1px;
  /* position: relative; */
  /* width: 100vw; */
  min-height: 100vh;
  background-color: #F4FFFF;
  
}

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

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

#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>

  <nav id="navbar"></nav>

  <div id="body"></div>
  <main id="main_content">
  <!-- <article id="scrollable_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.  
  <!-- </article> -->
  </main>

  <footer id="footer">
    <h1>Footer goes here</h1>
  </footer>

</body>
</html>