有沒有一種方法可以使用flexbox語法在彼此之上堆疊div？

Question

Flexbox問題。希望有人可以幫助:)

我試圖構建一個由div製作的牌組，並將它們堆疊在彼此上，就像你會使用position：absolute。

有沒有什麼辦法讓div使用flexbox在相同的空間中彼此重疊？

Answer 1

我需要有一些代碼和更多的信息，但我認爲這是可能的。

如果你想這樣做的紙牌方式：

只需在上面添加溢出隱藏卡和max-height讓我們說20px。

最後一個應該沒有max-height和overflow:auto。

但是，您正在做的事情可能更容易做到沒有flexbox。 Flexbox也可以與position:abosolute一起使用。它們是不同的屬性。舉一些你想要完成什麼的例子，或許我可以提供幫助。

Answer 2

獲得它的一種方法是設置負邊距。使用它的撲克牌：

.deck { 
 
    display: flex; 
 
    height: 200px; 
 
    flex-direction: column; 
 
} 
 

 
.card { 
 
    height: 100px; 
 
    width: 60px; 
 
    flex: 100px 1 0; 
 
    border: solid 1px black; 
 
    border-radius: 5px; 
 
    margin-bottom: -80px; 
 
    background-color: white; 
 
    box-shadow: 3px 3px 3px gray; 
 
}

<div class="deck"> 
 
<div class="card">1</div>  
 
<div class="card">2</div>  
 
<div class="card">3</div>  
 
<div class="card">4</div>  
 
<div class="card">5</div>  
 
</div>