स्थिति क्या है: इसके लिए सापेक्ष उपयोगी है?

Question

मैं आज सीएसएस पोजिशनिंग मोड के बारे में सोच रहा था और महसूस किया कि मैंने कभी भी बच्चे तत्वों पर काम करने के अलावा position:relative का उपयोग नहीं किया है।

मैं "डिजाइनर" से अधिक "डेवलपर" हूं, लेकिन मैंने पिछले कुछ वर्षों में काफी सीएसएस-आधारित लेआउट किए हैं। मैंने टेबल, फ्लोट, मार्जिन (पॉजिटिव और नकारात्मक), स्थिति: पूर्ण, और यहां तक ​​कि स्थिति भी तय की है, लेकिन मुझे नहीं लगता कि मुझे कभी ऐसा मौका मिला है जहां मैंने स्थिति का उपयोग किया है: असल में एक स्थिति को रखने के लिए रिश्तेदार तत्व।

क्या कुछ महान सीएसएस-गुरु तकनीक है जो स्थिति पर निर्भर करती है: रिश्तेदार (और असली दुनिया के डिजाइन में उपयोग किया जाता है)? क्या मैं याद कर रहा हूँ?

Answer 1

यह उपयोगी है अगर आप किसी तत्व को ऑफसेट करना चाहते हैं बिना मार्जिन के आसपास फ़्यूज़िंग और अन्य तत्वों के इसके परिणामों के बिना। आइए मान लें कि आप जानबूझकर एक कंटेनर के किनारे से एक छवि पोक करना चाहते हैं और (लगभग) इसके बगल में एक कंटेनर में कुछ सामग्री के साथ ओवरलैप करना चाहते हैं।

------------- ----- 
|   | | | 
| X -------| Y | 
|  | a || | 
|  -------| | 
------------- ----- 

कंटेनर aX की सामान्य पाठ प्रवाह का हिस्सा है और आप इसे उस तरह से, तो आप सिर्फ यह एक स्वच्छ प्रभाव के रूप में एक सा टीम से बाहर poking चाहते रखना चाहते हैं। यदि आप मार्जिन के साथ ऐसा करते हैं, तो यह वास्तव में गन्दा हो सकता है और आपकी कुछ अन्य सामग्री को फिर से भर सकता है।
position: relative; left: 10px; का उपयोग करके आप दुष्प्रभावों के बिना आसानी से उस प्रभाव को प्राप्त कर सकते हैं।

Answer 2

मैं इसे एक बार से अधिक हैडर छवियों तरह बातें प्रदर्शित करने के लिए उपयोग किया है, कुछ की तरह:

<div id="header"> 
    <div id="logo"></div> 
<div> 

सीएसएस:

#header { width: 1024px; margin: 0 auto; background: url(string.jpg); } 
#logo { position: relative; left: 40px; background: url(logo.jpg); } 

इस मामले में हैडर एक बड़ी पट्टी है सभी तरह एक पृष्ठभूमि छवि के रूप में, लोगो पट्टी में बैठता है बस थोड़ा ऑफसेट। कुछ मामलों में पैडिंग/मार्जिन से थोड़ा सा सामान थोड़ा सा स्थानांतरित करने के लिए मुझे लगता है, शायद यह सिर्फ राय है।

Answer 3

मैं मुख्य रूप से इसका उपयोग करता हूं जब मैं अपने मूल तत्व से संबंधित कुछ पूर्ण तत्व को रखना चाहता हूं। उस स्थिति में मूल तत्व को position: relative पर सेट करने की आवश्यकता है। यही वह जगह है जहां यह है।

आगे मैं पृष्ठभूमि छवि के साथ ब्लॉक तत्वों में आईई 6/7 हैलेआउट/फ्लिकरिंग बग को ठीक करने के लिए यहां और वहां भी इसका उपयोग करता हूं।

Answer 4

मैंने अतीत में posotion: relative का उपयोग कंटेनर तत्व के लिए किया है, जिसमें इसके अंदर स्थित सभी तत्वों (एक केंद्रित तीन कॉलम लेआउट की तरह) हैं। उदाहरण के लिए:

alt text http://www.freeimagehosting.net/uploads/2573654d07.png

मैं कंटेनर किसी भी भरपाई नहीं देते, लेकिन स्थिति यह position: relative के साथ मुझे बिल्कुल कॉलम कंटेनर के सापेक्ष स्थित कर सकते हैं। यदि कंटेनर position: static पर सेट है, क्योंकि यह डिफ़ॉल्ट रूप से है, तो कॉलम पूरी तरह से ब्राउज़र व्यूपोर्ट के सापेक्ष स्थित होगा, कंटेनर नहीं।

Answer 5

मैं position:relative; का उपयोग करता हूं ताकि सुपरस्क्रिप्ट वर्ण अभी भी vertical-align: top; से ऊपर चढ़ सकें लेकिन उन्हें मेरे अनुच्छेदों के अग्रणी से गड़बड़ करने की अनुमति नहीं देता है।

sup { 
    font-size: .7em; 
    vertical-align: top; 
    position: relative; 
    top: -.1em; 
}