Question

我试图在第一个名为contact-show的段落中横向滑动第一个名为contact-list的段落。现在这个位置绝对和相对。但是当我试图插入包括电话号码在内的第二个div时，所有内容都堆叠在一起。我希望它们像块元素一样显示在一个和另一个上面。据我所知，我使用绝对位置使幻灯片效果工作以使第二个内容滑过第一个内容。如果我不知道他们不会在同一条线上滑过。

＆＃13;

$('.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);
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

删除position:absolute并使用display:flex，就像这样。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

不希望元素堆叠在彼此之上

1 个答案: