सापेक्ष और पूर्ण

Question

के बीच अंतर मैं यह article about position पढ़ रहा हूं, और मुझे समझ में नहीं आ रहा है कि in this example अपेक्षाकृत स्थानांतरित div शरीर से प्रभावित क्यों है, फिर भी पूरी तरह से स्थित बॉक्स इसे अनदेखा करता है?
क्या वे ऐसा व्यवहार नहीं करते हैं जब वे किसी अन्य तत्व के अंदर स्थित हों?

सीएसएस:

body { 
    display: block; 
    margin: 8px; 
} 

#box_1 { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: #ee3e64; 
} 
#box_2 { 
    position: absolute; 
    top: 0; 
    left: 100px; 
    width: 200px; 
    height: 200px; 
    background: #44accf; 
} 

Answer 1

उदाहरण में दिखाया गया है:

अच्छी तरह से, रिश्तेदार के लिए वहाँ कोई ऊपर/नीचे/सही रिश्तेदार के लिए छोड़ दिया/है, इसलिए यह रहता है जहां यह रहना चाहिए। (शरीर का अपना मार्जिन और पैडिंग ब्राउज़र द्वारा परिभाषित किया गया है, जिसे आप ओवरराइड कर सकते हैं)।

पूर्ण के लिए, हमारे पास ऊपर और बाएं हैं, इसलिए यह थोड़ा ऊपर जाता है, क्योंकि यह किसी अन्य आइटम को अनदेखा करता है।

Answer 2

मूल रूप से आप चार स्थिति राज्यों, कर रहे हैं जो इस प्रकार है:

• स्थिर (डिफ़ॉल्ट)
• रिश्तेदार
• सापेक्ष और निरपेक्ष के बीच तय
• पूर्ण

अंतर क्या वह रिश्तेदार खुद के लिए "सापेक्ष" है (left:15px इसे 15px के साथ बाईं ओर पैड करेगा), लेकिन पूर्ण है इसके माता-पिता (पहले गैर स्थैतिक माता-पिता) के सापेक्ष और उसी विशेषता को लागू करने (बाएं: 15 पीएक्स) के परिणामस्वरूप इसे 15px दूर स्थानांतरित किया जा सकता है, जो मूल तत्व के बाएं किनारे के रूप में स्थानांतरित हो जाता है।

यह वास्तव में एक आकर्षक अध्ययन है और वेब लेआउट को समझने में अत्यधिक मदद करेगा।

Answer 3

ऊपर वर्णित स्पष्टीकरण और विवरण अच्छी तरह से हैं लेकिन सामान्य व्यक्ति या शुरुआत के लिए इसे समझना मुश्किल है। यह आसान है।

सापेक्ष: सापेक्ष कोई स्थिति नहीं है। यहां तक ​​कि आप हेवन अगर, टी रिश्तेदार इस्तेमाल किया है, और आप एक div सिर्फ इस तरह दिखाई बनाने:

margin-left:10px; 

यह 10px की अंतरिक्ष होने बाईं ओर कदम होगा; और इसी तरह यदि आप ऐसा करते हैं: स्थिति: रिश्तेदार;

margin-left:10px; 

ऐसा कोई नहीं होगा जैसा कि कोई रिश्तेदार नहीं था। और यदि समान अनुक्रम में किसी अन्य div के लिए पूर्ण उपयोग किया जाता है: स्थिति: पूर्ण;

margin-left:10px; 

यह कुल 10 + 10 = 20px मार्जिन-बाएं स्थानांतरित करेगा। क्योंकि पूर्ण के दूसरे div के 10px और सापेक्ष div id के 10 px इसमें जोड़ा गया है। यह कर के समान है:

#div1{ 
float:left; 
margin-left:10px; 
} 
#div2{ 
float:left; 
margin-left:10px; 
} 

Answer 4

absolute पेज लेआउट करने के लिए सबसे अच्छा है। यह सीएसएस द्वारा आयातित शीर्ष बाएं दाएं और नीचे होना चाहिए।और relative सीएसएस

Answer 5

से किसी भी टैग के बिना किया जाता है यहां स्थिति की आसान व्याख्या है: पूर्ण और स्थिति: सापेक्ष।

निरपेक्ष स्थिति के साथ, हम करें.अगर पर कहीं भी किसी HTML तत्व स्थानांतरित कर सकते हैं कि हम किसी भी स्थिति तत्व परिभाषित नहीं करते तो यह शरीर तत्व से स्थिति में ले जाएगा अन्यथा यह यह निकटतम परिभाषित स्थिति तत्व से स्थिति है ले जाएगा । नीचे उदाहरण है।

इस मामले में, 'div2' स्थिति 'div1' तत्व से लेता है।

<div id='div1' style="position: relative; left: 100px;top: 10px;"> 
<h1>This is the first position element</h1> 
<div id='div2' style=" position: absolute;left: 100px;top: 150px;"> 
<h2>This is a heading with an absolute position</h2> 
</div> 
</div> 

इस मामले 'DIV2' में शरीर से स्थान ले लेता है तत्व के रूप में कोई स्थिति परिभाषित किया गया है।

<div id='div1'> 
    <h1>This is the first position element</h1> 
    <div id='div2' style=" position: absolute;left: 100px;top: 150px;"> 
    <h2>This is a heading with an absolute position</h2> 
    </div> 
    </div> 

रिश्तेदार की स्थिति के साथ , एक HTML तत्वों से यह सामान्य है position.Below उदाहरण है स्थानांतरित कर सकते हैं।

इस मामले में यह इसके पोस्टियन 10px बाएं और 10px से आगे बढ़ेगा।

<div id='div2' style=" position: relative;left: 10px;top: 10px;"> 
<h2>This is a heading with an absolute position</h2> 
</div>