不希望元素堆叠在一起

Question

我试着在第二段中水平滑动，名为contact-show，而不是第一段名为contact-list。现在，它适用于绝对和相对位置。但是当我尝试插入包含电话号码的第二个div时，所有内容堆叠在一起。我希望它们像块元素一样显示在一个又一个上面。据我所知，我正在使用绝对位置来使幻灯片效果工作，使第二个内容滑过第一个内容。如果我不能做到这一点，它们就不会在同一条线上滑动。

​

$('.contact-box').hover(function() {
  $('.contact-list').hide("slide", {
    direction: "left"
  }, 500);
  $('.contact-show').show("slide", {
    direction: "right"
  }, 500);
}, function() {
  $('.contact-show').hide("slide", {
    direction: "right"
  }, 500);
  $('.contact-list').show("slide", {
    direction: "left"
  }, 500);
});

.contact-box {
  position: relative;
}

.contact-show {
  display: none;
}

.contact-list,
.contact-show,
{
  font-weight: bold;
  text-align: center;
  padding: 20px;
  background-color: transparent;
  font-size: 22px;
  position: absolute;
  width: 90%;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="page page-5">
  <h1 class="heading">Kontakta mig</h1>
  <div class="contact-box">
    <p class="contact-list">E-mail »</p>
    <p class="contact-show">bacon@hotmail.com</p>
  </div>
  <div class="contact-box">
    <p class="contact-list">Telefonnummer »</p>
    <p class="contact-show">073-000 00 00</p>
  </div>
</div>

<!-- end page-5 -->

​

Answer 1

删除position:absolute并使用display:flex，如下所示。

​

.contact-box {
    position: relative;
    /* display: flex;
    flex-direction: column-reverse; */
    height: 100px;
}
.contact-show{
  top:50px;
}
.contact-list, .contact-show {
   font-weight: bold;
    text-align: center;
    padding: 20px;
    background-color: transparent;
    font-size: 22px;
    position: absolute;
    width: 90%;
    left: 0;
    right: 0;
    margin: auto;
}

<div class="page page-5">
    <h1 class="heading">Kontakta mig</h1>
    <div class="contact-box">
        <p class="contact-list">E-mail »</p><p class="contact-show">bacon@hotmail.com</p>
    </div>
    <div class="contact-box">
        <p class="contact-list">Telefonnummer »</p><p class="contact-show">073-000 00 00</p>
     </div> 
 </div> <!-- end page-5 -->

​