HTML/CSS 맞춤 문제

Question

자바 스크립트 텍스트 슬라이더에 애니메이션을 적용하고 JS를 모두 정렬했지만 텍스트 정렬의 문제를 해결할 수 없습니다. 기본적으로 각 텍스트 조각은 수직으로 슬라이드 아웃되지만 슬라이더를 끄면 슬라이드의 텍스트가 서로 위에 있지 않습니다 (즉, 애니메이션을 적용하면 텍스트가 제대로 보이지 않습니다.). 이론적으로 올바르게 정렬해야하는 컨테이너와 동일한 패딩 - 가기 값으로 절대적으로 두 번째 슬라이드 요소를 배치 했습니까? 여기

는 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