视差布局和 z-index

Question

我有一个基本的视差布局，从根本上看似乎可以正常工作，但我正在努力解决静态部分的 z-index，这导致它们向后滚动而不是在某些 div 的前面

HTML:

<header class="header">
  
</header>
<main class="parallax-container">
  <section class="parallax-section parallax-section--hero">
    HERO
  </section>
  <section class="static-section static-section--about">
    ABOUT
  </section>
  <section class="parallax-section parallax-section--testimonials">
    TESTIMONIALS
  </section>
   <section class="static-section static-section--footer">
    FOOTER
  </section>
</main>

CSS:

* {
  margin: 0;
  box-sizing: inherit;
}

body { 
  box-sizing: border-box; 
  font-size: 2rem;
}

.parallax-container {
  border: 1px solid red;
  position: relative;
  // viewport of 100vh
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  // Set the perspective / simulate distance of children from the viewport
  perspective: 2px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallax-section, .static-section {
  height: 100vh;
}

.parallax-section {
  // Allow the parallax section to be positioned in the 3d space
  transform-style: preserve-3d;
  z-index: -1;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 3px solid blue;
    background-image: url(https://asiamountains.net/upload/slide/slide-1960x857-07.jpg);
    background-repeat: no-repeat;
    // Move the pseudo element away from the camera and scale it up to fill the viewport
    transform: translateZ(-1px) scale(1.5);
    // Keep the images from overlapping siblings
    z-index: -1;
  }
}

.static-section {
  background-color: darkgrey;
  color: white;
  z-index: 100;
}

我已经设置了上述问题的 codepen here，您会看到深灰色静态部分在视差背景图像后面滚动。我之前已经正确地设置了运行，但我显然犯了一个我无法发现的错误。 Z-index 和堆叠上下文总是让我失望！

如果有人有时间快速浏览一下，将不胜感激！

Answer 1

尝试将 position:relative 添加到 static-section:

* {
  margin: 0;
  box-sizing: inherit;
}

body { 
  box-sizing: border-box; 
  font-size: 2rem;
}

.parallax-container {
  border: 1px solid red;
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 2px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallax-section, .static-section {
  height: 100vh;
}

.parallax-section {
  transform-style: preserve-3d;
  z-index: -1;
}
  
.parallax-section:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 3px solid blue;
    background-image: url(https://asiamountains.net/upload/slide/slide-1960x857-07.jpg);
    background-repeat: no-repeat;

    transform: translateZ(-1px) scale(1.5);
    z-index: -1;
  }

.static-section {
  background-color: darkgrey;
  color: white;
  position: relative;
  z-index: 100;
}

<header class="header">
  
</header>
<main class="parallax-container">
  <section class="parallax-section parallax-section--hero">
    HERO
  </section>
  <section class="static-section static-section--about">
    ABOUT
  </section>
  <section class="parallax-section parallax-section--testimonials">
    TESTIMONIALS
  </section>
   <section class="static-section static-section--footer">
    FOOTER
  </section>
</main>

这是否解决了您的问题？

视差布局和 z-index

Parallax layout and z-index

html

css

z-index

parallax