ओवरफ्लो-वाई का उपयोग करना: छुपा या ओवरफ्लो-एक्स: केवल एक तत्व के एक तरफ छिपाने के लिए छुपा

Question

शीर्षक बहुत अधिक सवाल पूछता है लेकिन मुझे overflow-y: hidden और overflow-x: hidden का उपयोग करना पता है, आप या तो ऊपर और नीचे या बाएं और सवारी को छुपा सकते हैं तत्व के पक्ष में, लेकिन इन चयनकर्ताओं का उपयोग करके केवल एक तरफ छिपाने का एक तरीका है।

विशेष रूप से मुझे बहने वाले एक div के नीचे छिपाने में दिलचस्पी है, लेकिन शीर्ष पर नहीं।

यदि कोई वांछित प्रभाव इस पूरा प्रभाव को पूरा करने का कोई तरीका नहीं है?

इसकी आवश्यकता के लिए एक वैध उद्देश्य है और मैं यह देखना चाहता हूं कि ऐसा करने का एक मानक तरीका है या नहीं।

थोड़ा व्याख्या करने के लिए, मैं सिर्फ एक स्लाइड शो के लिए सीएसएस के नियंत्रण में है और मैं इस div को धक्का दिया जब मैं यह कर तथापि overflow: hidden मूल्यों बंद काट रहे हैं div ऊपर स्लाइड शो div अंदर एक तत्व पुश करने के लिए की जरूरत है। मैं पूरी तरह से overflow: hidden को हटा सकता हूं लेकिन फिर यह बहुत अच्छा स्लाइड शो नहीं बनाता है!

एक बेला नीचे शामिल है:

https://jsfiddle.net/ejhyz7t3/

Answer 1

नीचे jsfiddle प्रश्न में उदाहरण के आधार पर केवल निचले किनारे clip का उपयोग कर को काटने की वांछित प्रभाव प्रदान करता है:

https://jsfiddle.net/ejhyz7t3/2/

पूर्ण कोड संदर्भ के लिए नीचे की नकल की है:

एचटीएमएल

<div class="outer-container"> 
    <div class="inner-container"> 
    </div> 
</div> 

सीएसएस

.outer-container { 
    background: red; 
    height: 100px; 
    margin-top: 100px; 
    width: 150px; 
    padding-left: 50px; 
} 

.inner-container { 
    background: green; 
    height: 200px; 
    width: 100px; 
    transform: translateY(-50px); 
    position: absolute; 
    clip: rect(0, 100px, 150px, 0); 
} 

Answer 2

मैं ने वही समस्या जहां मैं एक खींचने योग्य div कि मैं सही/नीचे करने के लिए अतिप्रवाह करना चाहता था था, लेकिन बाएं ऊपर नहीं /। मैंने जेड-इंडेक्स को एडजस्ट करके हल किया। कंटेनर div से z-index: 0px; जेड-इंडेक्स को खींचने योग्य: 500 पीएक्स; और शीर्ष और बाएं (मेनू) में divs को z-index: 1000px ;. यह प्रभावी ढंग से ड्रैगगेबल परत को सैंडविच करता था जो मैं चाहता था कि दिशाओं में बहती है।

Answer 3

.mydiv { 
    clip: rect(-100px, -100px, auto, -100px); 
} 

क्लिप रेक्ट के निचले हिस्से की स्थापना auto करने के लिए overflow: hidden तरह क्लिप होगा। -100px मूल्यों को मनमाने ढंग से बहने के लिए कुछ जगह छोड़ने के लिए चुना जाता है।