html - 隐藏在固定背景滚动条上的 H1 标签

Question

目前，滚动标题二和标题三标题不显示。如何在保持 h1 标题和背景固定的情况下让每个标题显示在其各自背景的顶部？

.parallax {
      height: 100vh;
      display:flex;
      align-items: center;
      position:relative;
    }

    .bg1 {
      background-attachment: fixed;
      background-image: url('https://source.unsplash.com/random');
        background-size: cover;
    }

    .bg2 {
      background-attachment: fixed;
      background-image: url('https://placekitten.com/g/800/600');
        background-size: cover;
    }

    .bg3 {
      background-attachment: fixed;
      background-image: url('https://unsplash.it/1200/800');
        background-size: cover;
    }

    h1 {
      position:fixed;
      background: rgba(255,255,255,0.7);
      margin-left: 45px;
      padding: 10px 20px;
    }

<section class="parallax bg1">
    <h1>Heading One</h1>
  </section>
  <section class="parallax bg2">
    <h1>Heading Two</h1>
  </section>
<section class="parallax bg3">
    <h1>Heading Three</h1>
</section>

Answer 1

只需将 h1 position 属性更改为 relative :)