HTML/CSSアライメントの問題

Question

JavaScriptのテキストスライダをアニメーション化していて、JSをすべてソートしていますが、テキストのアライメントの問題を解決できないようです。基本的には、各テキストが上下にスライドしますが、スライダをオフにすると、スライドのテキストが互いに重ならないようになります（アニメーション化するとテキストが正しく表示されません）。私は2番目のスライド要素をコンテナと同じパディングトップ値で配置しました。これは理論的には正しく配置する必要がありますか？ここで

はcodepenリンクhttp://codepen.io/emilychews/pen/oBPjbR

され、コードは以下のもあります。

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

どのようなヘルプも素晴らしいでしょう。

エミリー

Answer 1

.bb_slide_text2ターゲットセレクタは.bb_slide_text