मैं position:absolute का उपयोग किए बिना छवियों के किसी अन्य div (पृष्ठभूमि छवि नहीं) के शीर्ष पर छवियों के ओवरले को ओवरले करने के लिए उचित सीएसएस विधि की तलाश में हूं। क्या कोई जानता है कि इसे कैसे करना है?पद का उपयोग किए बिना छवियों को ओवरले कैसे करें: पूर्ण?
position: absolute "अनुचित" नहीं है - यह सीएसएस स्पेक का हिस्सा है! जब तक आप position: relative या शायद कुछ float गुणों के साथ आगे बढ़ते हैं, तब तक अन्य तत्वों पर तत्वों को रखने का कोई दूसरा तरीका नहीं है।
position: absolute ऐसा करने का सबसे आसान तरीका है। आपको क्या लगता है कि यह एक बुरा विचार है? के लिए
div
{
background: url(/images/foo.png) no-repeat;
}
हालांकि,:
<div>
<img src="...">
</div>
फिर div देना एक background-image:
केवल अन्य समाधान एक पृष्ठभूमि के साथ एक div के अंदर एक छवि का उपयोग करने, इस तरह है कई छवियों मैं निश्चित रूप से position: absolute पर चिपके रहूंगा।
बहुत गड़बड़ डेमो here प्रभाव का प्रदर्शन करता है।
, div के भीतर पृष्ठभूमि से निपट नहीं सकता है, और स्थिति के साथ सहमत नहीं है: पूर्णतम आसान है, लेकिन उत्तरदायी डिजाइन –
आप उपरिशायी कर सकते हैं/एक दूसरे के एक नकारात्मक मार्जिन का उपयोग कर के ऊपर तत्वों ओवरलैप। उदाहरण:
#b{
margin-left:-10px;
}
यह छोड़ दिया 10px करने के लिए तत्व b चले जाएँगे, ओवरले जो भी हो के बाईं ओर है (: ब्लॉक प्रकार तत्व है, एक इनलाइन, अंतराल की तरह इस संभालने एक प्रदर्शन है)।
समय के लिए आदर्श नहीं है, ऋणात्मक मार्जिन एक बुरा विचार है। कुछ ब्राउज़रों में उनके साथ कीड़े होती हैं और वे मूल वस्तु के लिए आरक्षित "रखी गई जगह" को नहीं बदलती हैं। मुझे पता है कि ओपी ने विचारों के लिए पूछा था, लेकिन मैं सिफारिश करता हूं कि वे नकारात्मक मार्जिन पर 'स्थिति: पूर्ण; 'का उपयोग करें। – jfriend00
@ jfriend00 मैं सहमत हूं, लेकिन "स्थिति का उपयोग किए बिना: पूर्ण" प्रश्न का अनिवार्य हिस्सा है। –
मैं ओपी के लाभ के लिए प्रतिक्रिया दे रहा था। मुझे नहीं लगता कि ओवरलैपिंग ऑब्जेक्ट्स के लिए पूर्ण स्थिति से बेहतर विकल्प है। यह मदद करेगा अगर उन्होंने समझाया कि वे पूर्ण स्थिति से बचने की कोशिश क्यों कर रहे हैं। मुझे संदेह है कि वे समझ नहीं पाएंगे कि माता-पिता पर 'स्थिति: रिश्तेदार' का उपयोग कैसे करें। – jfriend00
आप 'स्थिति: पूर्ण' का उपयोग क्यों नहीं कर सकते? –
'स्थिति: पूर्णांक के साथ लेआउट को संरक्षित करते समय माता-पिता में 'स्थिति: सापेक्ष' के साथ संयुक्त 'दो' ऑब्जेक्ट को ओवरलैप करने का एक बहुत अच्छा तरीका है। यह एक स्व-निहित कंटेनर बनाता है जिसे सामान्य HTML बॉक्स मॉडल के साथ रखा जा सकता है, लेकिन कंटेनर के अंदर, आप ओवरलैप बनाने के लिए स्थिति का उपयोग करते हैं। – jfriend00
आपको वास्तव में यह बताने की जरूरत है कि आप 'स्थिति: पूर्ण' से बचने का प्रयास क्यों कर रहे हैं क्योंकि यह शायद सबसे अच्छा समाधान है और इसके बारे में आप जो भी चिंतित हैं, उसे हल करने के शायद तरीके हैं। – jfriend00