शीर्षक, मूल रूप से। मैं position: relative जैसी चीजों के बजाय मार्जिन पोजिशनिंग का उपयोग करके अपना बहुत काम कर रहा हूं, क्योंकि मुझे पता नहीं था कि आप इसे इस तरह से नियंत्रित कर सकते हैं।स्थिति का उपयोग करने के बजाय मार्जिन पोजिशनिंग का उपयोग क्यों नहीं करें: सापेक्ष शीर्ष 5px?
margin क्या करना है, और मुझे position का उपयोग क्यों करना चाहिए जब margin काम पूरा हो जाता है?
सबसे पहले, स्थैतिक स्थिति top मान को अनदेखा करती है, इसलिए मुझे लगता है कि आपका प्रश्न थोड़ा उलझन में है। यदि आप position:relative के बारे में पूछना चाहते थे, तो यहां एक उत्तर है जो इसे संबोधित करता है।
आम तौर पर, मैं रिश्तेदार स्थिति के बजाय अपने पड़ोसियों के सापेक्ष स्थिति तत्वों के लिए मार्जिन और पैडिंग का उपयोग करना बेहतर मानता हूं (जो मुझे लगता है कि आप वास्तव में पूछ रहे हैं क्योंकि स्थैतिक स्थिति top मान को अनदेखा करती है)।
सापेक्ष स्थिति या नकारात्मक मार्जिन ऑब्जेक्ट ओवरलैपिंग का कारण बन सकता है और यह शायद ही कभी मैं चाहता हूं और ईवेंट रूटिंग, सीमाओं, पृष्ठभूमि आदि के साथ कुछ मुद्दों का कारण बन सकता है ... यदि यह स्पष्ट रूप से आप नहीं चाहते हैं। मैं position:relative उन बच्चों के लिए एक कंटेनर के रूप में करता हूं जो position: absolute हैं, लेकिन बहुत सारे तत्वों को अपने आप से आगे बढ़ाने के लिए कभी भी इसका उपयोग नहीं करते हैं क्योंकि सीमाएं और पैडिंग लगभग हमेशा साफ होती हैं।
मार्जिन क्या करता है, इसके बारे में आपके प्रश्न के अतिरिक्त भाग के रूप में, आपको शायद थोड़ी सी खोज करनी चाहिए और फिर कुछ आरेखों के रूप में पढ़ने के लिए शायद आपको यह देखने में मदद मिलेगी। मार्जिन किसी ऑब्जेक्ट के चारों ओर पिक्सल का बाहरी सेट है। मार्जिन के अंदर सीमा है। सीमा के अंदर पैडिंग है और पैडिंग के अंदर सामग्री है। तो मार्जिन सीमा के बाहर की वस्तु के चारों ओर पिक्सेल की संख्या है और पैडिंग सीमा और वस्तु की सामग्री के बीच पिक्सल की संख्या है।
आप कोई सीमा निर्दिष्ट है, तो मार्जिन और गद्दी छोड़कर बहुत समान प्रभाव प्रदान पड़ोसी वस्तुओं के मार्जिन कभी कभी ढह रहे हैं कि (जैसे एक भी मार्जिन में संयुक्त), लेकिन गद्दी कि जिस तरह से संयुक्त कभी नहीं जाता है और पृष्ठभूमि सीमा तक फैली , लेकिन मार्जिन के तहत नहीं।
यहाँ एक StackOverflow प्रश्न/उत्तर बनाम गद्दी हाशिये पर है कि कुछ अन्य उपयोगी संदर्भ प्रदान करता है: When to use margin vs padding in CSS
यहाँ एक अच्छा article सीएसएस बॉक्स मॉडल जो मार्जिन और गद्दी
धन्यवाद, उत्तर दिया कि मैं पूरी तरह से क्या सोच रहा था। – user2288945
@ user2288945 - मैंने पैडिंग की तुलना में मार्जिन के बारे में मेरे उत्तर में थोड़ा और जोड़ा। – jfriend00
को शामिल किया गया संक्षेप में के बारे में है, हाशिए किसी तत्व के बॉक्स के आस-पास स्थान जोड़ें और पृष्ठ प्रवाह में मिलान के लिए आरक्षित स्थान की मात्रा को संशोधित करने के लिए संशोधित करें। तो एक शीर्ष मार्जिन एक ब्लॉक नीचे चला जाता है, जबकि इसके नीचे आने वाली सभी सामग्री को भी स्थानांतरित करता है। एक निचला मार्जिन उस सामग्री को स्थानांतरित करता है जो ब्लॉक को स्वयं ही उसी स्थान पर छोड़कर नीचे चला जाता है। यह बहुत सहज है और संभवतः आप वास्तव में व्यवहार करते हैं कि आप कैसे उम्मीद करेंगे।
सापेक्ष स्थिति कुछ अजीब करता है: यह बदलता है जहां एक ब्लॉक खींचा है, लेकिन जहां इसके लिए आरक्षित आरक्षित जगह नहीं है। इसलिए, यदि आप रिश्तेदार स्थिति का उपयोग करते हैं और शीर्ष पर 10px सेट करते हैं, तो बॉक्स को पृष्ठ के नीचे 10px स्थानांतरित किया जाएगा - लेकिन इसके बाद सामग्री नहीं चली जाएगी। इससे बॉक्स के बाद सामग्री के साथ ओवरलैप हो सकता है।
यदि आप वास्तव में एक अजीब प्रभाव चाहते हैं (और कार्रवाई में सापेक्ष स्थिति देखना चाहते हैं), दोनों फ्लोट लागू करें: बाएं और सापेक्ष स्थिति को एक छोटे से ब्लॉक पर लागू करें। ब्लॉक स्थानांतरित हो जाएगा, लेकिन इसके लिए आरक्षित क्षेत्र इसके मूल स्थान पर रहेगा।
<div style="position: relative; left: -100px; width: 100px; height: 100px; float: left;">
</div> (lorem ipsum text)
कहते हैं कौन आपको स्थिति का उपयोग करना चाहिए रहे हैं:
मैं तुम्हारे लिए एक उदाहरण बना दिया? और इसके अलावा, स्थाई रूप से स्थित तत्वों के लिए 'शीर्ष' को अनदेखा किया जाता है, इसलिए मुझे यकीन नहीं है कि आपका आधार ध्वनि है। – harpo