他の要素の上に積み重ねたい要素がありません

Question

contact-showという名前の2番目の段落で、contact-listという最初の段落を横方向にスライドしようとしています。これは現在、ポジションの絶対値と相対値で動作します。 しかし、私は電話番号を含む2番目のdivを挿入しようとすると、すべてがお互いの上に積み重ねられました。私はそれらをブロック要素のように表示させていきたいと思います。 私が知っている限り、私は絶対位置を使用して、第2のコンテンツを最初のものにスライドさせるスライドエフェクトを作成します。もし私が持っていなければ、彼らは同じ行にスライドしません。

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