css 在固定位置框和相对位置框之间使用z索引

wvmv3b1j  于 2023-06-25  发布在  其他
关注(0)|答案(3)|浏览(125)

当我为我的网站设计UI/UX设计时，我在使用z-index-CSS-Property时遇到了问题。
我的主页面只有一张固定的图片，当你开始滚动时，一个白色的框将覆盖主图片，但navbar仍然在主内容上方。当您继续滚动并在您完成阅读内容并看到footer后，页脚将覆盖navbar。这意味着navbar在主画面之上并且也在主内容之上。但它不应该覆盖页脚：

#footer {
    z-index: 1000;
}

#navbar {
    z-index: 10;
}

我定义了navbar作为我的身体中的最后标记，它将正确地覆盖图片和主要内容。但footer是MAIN CONTENT中的LAST标签。因为当你继续滚动主要内容时它会显示出来。正如你现在所理解的，navbar覆盖/高于footer……
有办法解决吗？
如果你认为我能告诉你更多细节，评论一下🙏🏻

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

3条答案

按热度按时间
klh5stk1

klh5stk11#

你有没有试过使用position: sticky而不是fixed和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>
赞(0）分享  回复(0）举报  2023-06-25
nxowjjhe

nxowjjhe2#

因为页脚位于#main_content内部，所以它的z索引与导航栏中的主要内容一样多。因此，您需要在主要内容上设置一个z索引，该索引高于导航栏的z索引，以便页脚覆盖导航栏。（因为您没有显示HTML，所以我只是假设导航栏在主内容容器之外。）
页脚的当前高z索引仅与位置最近的父元素相关，该父元素可能是#main_content容器。
但是，另一个复杂之处在于，您希望main_content的内容位于导航栏下，因此这又带来了另一个问题。所以我的建议是将页脚 * 放在 * main_content之外，并给它一个比导航栏更高的z索引。如果页脚在主内容内，并且您希望主内容的其余部分位于导航栏下，则不能让页脚覆盖导航栏。

赞(0）分享  回复(0）举报  2023-06-25
kcrjzv8t

kcrjzv8t3#

要使用所提供的代码实现所需结果，唯一需要做的就是从#scrollable_content中删除z-index: 9;

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>

但是，您的标记有很多不必要的CSS和糟糕的语义结构（我建议阅读MDN文章Document and website structure）。
在这个例子中，我提供了一个更好的语义结构，并注解掉了不需要的CSS声明。唯一需要定位的容器是nav（固定到位）和footer（相对而言，仅能够使用z-index覆盖nav）。唯一需要z-index的容器是footer。不需要#scrollable_content容器。
我意识到#main_content的背景色没有呈现在h1的上边距中。我认为这很奇怪，尤其是因为没有来自另一个元素的折叠边缘。我在#main_content中添加了1px顶部填充来解决这个问题。

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

#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>
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com