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

-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

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

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

回答

相關問題