ओवरफ्लो एक डीआईवी

Question

में केवल एक तत्व है, क्या एक डीआईवी में एक तत्व के अतिप्रवाह की अनुमति देने के लिए कोई तरीका, सीएसएस या जावास्क्रिप्ट है, भले ही उसके माता-पिता अतिप्रवाह छिपा हुआ हो।

मैंने एक jQuery स्लाइडर लिखा है जो overflow: hidden का उपयोग करके स्लाइड छुपाता है।

<div class="container"> 
    <img src="image.jpg" /> 
    <div class="text"> 
     THIS TEXT IS HIDDEN WHEN POSITIONED OUTSIDE OF .container 
    </div> 
</div> 

सीएसएस:

.container{ 
    overflow:hidden; 
    position: relative; 
    width: 500px; height: 250px; 
} 

मैं हालांकि स्वाभाविक रूप से अतिप्रवाह करने के लिए छवि की जरूरत है।

Answer 1

आपको position: relative; हटा देना चाहिए। यदि आप इसे overflow: hidden; के समान तत्व पर रखते हैं, तो यह तत्व को छुपाएगा। यदि आपको वास्तव में इसकी आवश्यकता है, तो इसे .container के पैरेंट पर रखें (overflow: hidden वाले तत्व की तुलना में पेड़ में उच्च)।

jsFiddle Demo
Explanatory article

#wrap { position: relative; } 
 

 
.container{ 
 
    overflow:hidden; 
 
    width: 300px; height: 200px; 
 
    padding: 10px; 
 
    background-color: cyan; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    top: 280px; left: 0; 
 
    border: 1px solid red; 
 
}

<div id="wrap"> 
 
    <div class="container"> 
 
    Container 
 
    <div class="text">Not hidden anymore when positioned outside of .container</div> 
 
    </div> 
 
</div>

Answer 2

jQuery उदाहरण

$('.text').each(function(){ 
    var t = $(this);     // text div 
    var c = t.closest('.container'); // container parent 
    var i = c.children('img:first'); // container image 
    t.width(c.width());    // set text width = to container width 
    c.width(i.width());    // set container width = to text width 
}); 

नोट:

1. यह पैडिंग/मार्जिन/सीमाओं को प्रभावित करने में नहीं लेता है, लेकिन मूल तर्क है जिसका आप उपयोग कर सकते हैं।
2. पाठ चौड़ाई कंटेनर चौड़ाई के बराबर की स्थापना केवल यह उपस्थिति है कि अतिप्रवाह लागू किया जाता है (500px करने के लिए आप भी सिर्फ पाठ div की चौड़ाई निर्धारित कर सकते हैं)

Answer 3

घोषित z- सूचकांक के साथ देता है सीएसएस में आप ऐसा करने के लिए पूर्ण स्थिति का उपयोग कर सकते हैं।

.container{ 
    z-index:900; 
    overflow:hidden; 
    width: 500px; 
    height: 250px; 
} 

.container img{ 
    z-index:920; 
    position:absolute; 
} 

यदि आपकी स्थिति सत्य नहीं है तो आप छवि के लिए मार्जिन सेट कर सकते हैं;