HTML / CSS 对齐问题

Question

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

这是代码笔linkhttp://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

HTML / CSS 对齐问题

HTML / CSS Alignment Issue

html

css

css-position

alignment

absolute