सीएसएस ओवरफ्लो पूर्ण स्थिति के साथ छिपा हुआ

मैं इस पर अपना सिर टक्कर लगी हूं। मैं एक छवि को पूर्ण स्थिति में रखना चाहता हूं कि मैं एक div में चारों ओर घूम रहा हूं और कुछ भी चाहता हूं जो div के बाहर फैला हुआ हो। यहां समस्या का एक उदाहरण दिया गया है:सीएसएस ओवरफ्लो पूर्ण स्थिति के साथ छिपा हुआ

<html> 
<body> 
    <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> 
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> 
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> 
    </div> 
</body> 
</html>

तो, मैं लोगो का दायां किनारा प्रदर्शित नहीं करना चाहता हूं। विचार?

स्रोत

2010-07-11 David A

पर यह देखें, यह "युक्त" div के प्रवाह के बाहर है।

आपके विकल्प या तो अपेक्षाकृत स्थिति में हैं या पूरी तरह से स्थित div के आयामों को समायोजित करने के लिए, गतिशील रूप से jQuery के साथ।

स्रोत

2010-07-12 00:13:11

ठीक काम करता है, मैं उससे डरता था। धन्यवाद! –

एचएम इस उदाहरण के बारे में क्या है

'क्या अंदरूनी div को छिपाने के लिए कोई कारण नहीं है। विंडोज और ओपेरा – Olga

के लिए सफारी में इस व्यवहार का अनुभव करना यह सही नहीं है। अतिप्रवाह जोड़ना: छुपा; आपके माता-पिता के कंटेनर में इसके अंदर बिल्कुल स्थित तत्व बनायेगा जो बाहर नहीं दिखाया जाएगा। –

अपने बाहरी div में position: relative जोड़ने का प्रयास करें। यह पेज के सापेक्ष उस div (छवि ओवरफ्लो शैली का सम्मान) के सापेक्ष छवि को स्थिति देगा।

उदाहरण: चूंकि छवि के कंटेनर बिल्कुल स्थिति में है

<html> 
<body> 
    <div style="position: relative; width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> 
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> 
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> 
    </div> 
</body> 
</html>

JS Bin

स्रोत

2010-07-12 00:10:53

लेकिन तब इसे अब और पेज के अनुसार किस स्थिति नहीं है। –

यदि छवि "div में चारों ओर घूमना" मानती है तो आप इसे पृष्ठ के सापेक्ष क्यों चाहेंगे? शायद मुझे कुछ याद आ रही है। –

धन्यवाद आदमी आपने मेरा दिन बचाया :) – user2972061

छवि को पूर्ण स्थिति में ले जाएं, फिर मूल कंटेनर के सापेक्ष जोड़ें। इसी तरह की स्थिति में मेरे लिए काम किया।

<html> 
<body> 
    <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> 
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> 
    <div style="position: relative; overflow:hidden;"><img style="position: absolute; top: 10px; left: 250px; z-index: -1;" src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> 
    </div> 
</body> 
</html>

स्रोत

2014-02-06 04:22:31 christoshrousis

सीएसएस ओवरफ्लो पूर्ण स्थिति के साथ छिपा हुआ

उत्तर

संबंधित मुद्दे