使视差元素完全不透明

Question

我有以下HTML结构：

<section class="mysection">
  <div class="parallax">
    <div>
       <svg></svg>
    </div>
  </div>
</section>

<section class="back">
    <div class="triangle">
        <img src="img/red-triangle-bkgrd.png">
    </div>      
</section>

这是很少的CSS：

    .parallax{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

  section.back {
    .triangle {
        position: relative;
        img {
            position: absolute;
            right:0;
            top: 0;     
        }
    }
  }

在parallax上使用视差之前，back只是位于mysection底部边框的正下方。

当我将parallax缩放1.11111111时，parallax使用视口的100％宽度。但是，back不再位于parallax下方。相反，它与parallax区域重叠。这是现实情况的图片：

如何让重叠区域中的back不可见？换句话说，如何使svg或其容器完全不透明而不显示其下方的重叠图像？

我在svg及其容器上尝试了不透明度：1`，但它无效。

更详细一点，如果这是相关的，我会使用一个名为ScrollMagic的工具来完成这项工作。

Answer 1

您可以使用z-index设置堆叠顺序。尝试设置以下内容：

.mysection {
  position: relative;
  z-index: 1;
}

这应该确保.mysection中的任何内容（例如svg / map）通过 over 任何相交（假设你没有将更大的z-index应用于其他元素） ）。