HTML / CSS 对齐问题

Question

我正在为一个 javascript 文本滑块制作动画，并且我已经对 JS 进行了排序，但我似乎无法解决文本对齐的问题。基本上每条文本都垂直滑入和滑出，但是当我关闭滑块时，幻灯片的文本不会彼此重叠（这意味着在制作动画时，文本看起来不太正确）。我已经绝对定位了第二个滑动元素，具有与容器相同的 padding-top 值，理论上应该正确对齐？

这是一个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