क्या फ्लेक्सबॉक्स सिंटैक्स का उपयोग करके एक-दूसरे के ऊपर divs को ढेर करने का कोई तरीका है?

Question

फ्लेक्सबॉक्स मुद्दा। पूर्ण: उम्मीद है कि किसी को :)

मैं divs से बना ताश के पत्तों के निर्माण और उन्हें आप की तरह एक दूसरे को स्थिति का उपयोग को लेकर ढेर कोशिश कर रहा हूँ कर सकते हैं।

क्या फ्लेक्सबॉक्स का उपयोग करके एक ही स्थान पर divs को ओवरले करने के लिए divs प्राप्त करने का कोई तरीका है?

Answer 1

मैं तुम्हें और अधिक जानकारी से कुछ कोड की आवश्यकता होती है, लेकिन मुझे लगता है कि यह संभव है।

आप इसे सॉलिटेयर तरह से करना चाहते हैं:

बस ऊपर अतिप्रवाह कार्ड के लिए छिपा हुआ जोड़ सकते हैं और max-height मान लीजिए कि 20px करते हैं।

अंतिम एक नहीं max-height और overflow:auto होना चाहिए।

हालांकि बात यह है कि आप कर रहे हैं शायद 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>