Faire élément parallaxed complètement opaque

Question

je la structure HTML suivant:

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

C'est le CSS MOINS:

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

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

Avant d'utiliser parallaxe sur le parallax, back se trouve juste immédiatement en dessous du fond frontière de mysection.

Lorsque je redimensionne parallax par 1.11111111, le parallax utilise 100% de la largeur de la fenêtre. Cependant, back ne se trouve plus juste sous parallax. Au lieu de cela, il chevauche la zone parallax. Voici une photo d'une situation réelle:

Comment puis-je faire back dans la zone de chevauchement invisible? Autrement dit, comment rendre svg ou ses conteneurs complètement opaques sans montrer l'image superposée sous-jacente?

J'ai essayé 'opacity: 1` sur svg et ses conteneurs, mais cela ne fonctionne pas.

Pour être plus détaillé, j'utilise un outil appelé ScrollMagic pour ce travail si cela est pertinent.

Answer 1

Vous pouvez définir l'ordre d'empilement à l'aide de z-index. Essayez de régler les éléments suivants:

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

Cela devrait faire en sorte que tout ce qui est dans votre .mysection (comme le svg/carte) passe plus quel que soit intersecte (en supposant que vous ne demandez pas un plus grand z-index aux autres éléments).