がparallaxed要素完全に不透明

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> 

これは、LESSでCSSさ：parallaxに視差を使用する前に

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

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

、backだけですぐに底部の下に座っています国境はmysectionです。

parallaxを1.11111111に合わせると、parallaxはビューポートの幅を100％使用します。しかし、backは、もうparallaxの直下にはありません。代わりに、parallax領域と重複します。

がどのように私は目に見えない重複領域におけるback行うことができます：ここで現実の状況の画像はありますか？別の言い方をすれば、どうやってsvgやそのコンテナをその下に重なったイメージを表示せずに完全に不透明にすることができますか？

svgとそのコンテナで 'opacity：1`を試しましたが、動作しません。

これは関連性のある場合、私はこの作業にScrollMagicというツールを使用します。

Answer 1

z-indexを使用して積み重ね順序を設定できます。以下を設定してみてください：

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

これはあなたの.mysection（例えばSVG /マップなど）でどんなのがを超えるものは何でも交差を渡すことを確認してください（あなたが他の要素に大きなZインデックスを適用しないと仮定すると）。