不想要元素堆叠在彼此之上

-1

我试图在名为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">[email protected]</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 -->

来源

2017-08-24 Lacon

提供的UI截图为我们了解。 – Roshan

有一个更简单的方法来做到这一点，没有jquery：https://codepen.io/Kathara/pen/zdLxrj – Kathara

谢谢Kathara！但是我使用jQuery的原因是因为这个练习的目标是更多地了解jQuery。 :) – Lacon

删除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">[email protected]</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 -->

来源

2017-08-24 08:03:21

谢谢！但我认为我需要使用绝对位置，因为我想从jQuery中获得的效果是可行的。我想让第二段从右侧的第一段滑入。并获得第一个堆叠下的所有其他信息，如列表或类似块元素。 – Lacon

我已根据您的要求更新了一些固定位置的答案，请看一看。 –

不想要元素堆叠在彼此之上

回答

相关问题