Alignement HTML/CSS Problème

Question

J'anime un curseur de texte javascript et le JS est trié, mais je n'arrive pas à résoudre le problème d'alignement du texte. Fondamentalement chaque morceau de texte glisse verticalement, mais quand j'ai le curseur éteint, le texte pour les diapositives ne s'asseoir pas les uns sur les autres (cela signifie qu'en animant, le texte ne semble pas tout à fait correct). J'ai positionné absolument le deuxième élément de la diapositive, avec la même valeur de remplissage que le conteneur, qui devrait théoriquement l'aligner correctement?

Voici un lien codepen http://codepen.io/emilychews/pen/oBPjbR

Et le code est également ci-dessous.

<style> 
.outerwrap { 
background:red; 
width: 100%; 
height: inherit; 
padding: 10% 5%; 
} 
.bb_slide_text2 { 
position: absolute; 
top: 0; 
padding-top: 10%; 
} 
</style> 

<section class="outerwrap"> 
    <div class="bb_slidetextwrapper2"> 
    <div class="bb_slide_text bb_slide_text1"> 
     <h2>First Heading</h2> 
     <p>First line of text</p> 
    </div> 
    <div class="bb_slide_text bb_slide_text2"> 
     <h2>Second Heading</h2> 
     <p>Second Line of text</p> 
    </div> 
    </div> 
</section> 

Toute aide serait géniale.

Emily

Answer 1

.bb_slide_text2 sélecteur de cible doit être .bb_slide_text