div पर सीएसएस स्थिति कैसे भाई विभाजन की स्थिति को प्रभावित करती है?

मैं CSS Positions articles on Alistapart के माध्यम से जा रहा हूं। नीचे स्निपेट ने मेरा ध्यान खींचा और पीछे सिद्धांत को समझ नहीं पाया।div पर सीएसएस स्थिति कैसे भाई विभाजन की स्थिति को प्रभावित करती है?

एचटीएमएल नीचे/सीएसएस दो बक्से एक दूसरे के ऊपर से पता चलता। लेकिन अगर मैं # बॉक्स_1 की स्थिति को पूर्ण करने के लिए बदलता हूं, तो # बॉक्स_2 # बॉक्स_1 ओवरलैप करें।

<!DOCTYPE html > 
<html lang="en"> 
<head> 
    <style> 
     #box_1 { 
      position: relative; 
      width: 200px; 
      height: 200px; 
      background: #ee3e64; 
     } 
     #box_2 { 
      position: absolute; 
      width: 200px; 
      height: 200px; 
      background: #44accf; 
     } 
    </style> 
</head> 
<body> 
    <div id="box_1"></div> 
    <div id="box_2"></div> 
</body> 
</html>

कैसे एक और बॉक्स (box_1) की स्थिति करता है एक अलग/भाई div की स्थिति को प्रभावित करता (box_2)। क्या 'निरपेक्ष' हमेशा तात्कालिक गैर स्थैतिक माता-पिता को पूर्ण नहीं होना चाहिए?
ऊपर सीएसएस में (के साथ "स्थिति: रिश्तेदार," box_1 में), अगर मैं जोड़ने के "शीर्ष: 0;" # बॉक्स_2 पर, फिर बॉक्स_2 फिर से ओवरलैप प्रतीत होता है। ऐसा क्यों होता है?

स्रोत

2013-02-12 Dbob

एक बिल्कुल-तैनात तत्व अपनी स्थिर स्थिति में बने रहने यदि आप किसी भी इसके top, right, bottom या left संपत्तियों की अपने पूर्वजों के किसी भी स्थिति में है, चाहे निर्दिष्ट नहीं करते हैं, करेंगे। इसके बजाय, यह उसी तरह है जैसे कि आपके द्वारा निर्दिष्ट नहीं किया था position: absolute में #box_1 से प्रभावित है - यही कारण है कि कुछ भी नहीं #box_2 होने जब आप बस position: absolute के लिए सेट प्रकट होता है।

हालांकि, ध्यान दें कि #box_1 केवल #box_2 को प्रभावित करता है क्योंकि 1 से पहले 2; एक बार आप बिल्कुल #box_2 यह प्रवाह से बाहर ले जाया जाता है और किसी भी स्थिति भाई बहन है कि यह पालन प्रवाह होगा मानो #box_2 अब वहां नहीं था। जहां मैं एक #box_3 कि #box_1 के समान है बनाने this example देखें और#box_2 के बाद यह जोड़ने के लिए, जिसमें #box_3 overlaps क्योंकि #box_2 3 सामान्य प्रवाह में 2 नहीं देखता; यह केवल देखता है 1.

एक बार जब आप सेट top: 0#box_2 लिए, तो यह जानता है कि यह व्यूपोर्ट के शीर्ष के साथ संलग्न किया गया है (अपने पूर्वजों में से कोई भी के बाद से युक्त ब्लॉक के रूप में तैनात कर रहे हैं)।

स्रोत

2013-02-12 08:37:18 BoltClock

आह, जो मैं खोज रहा हूं ("यदि आप अपने शीर्ष, दाएं, नीचे या बाएं गुणों में से कोई भी निर्दिष्ट नहीं करते हैं तो" एक स्थिर स्थिति तत्व स्थिर स्थिति में रहेगा ")। धन्यवाद एक गुच्छा और +10 वोट वोट; अगर केवल एसएफ इसे अनुमति देता है :) – Dbob

एक div पर सीएसएस स्थिति विभाजन भाई की स्थिति को प्रभावित करता नहीं है, लेकिन यह बच्चे तत्वों को प्रभावित करता है।

एचटीएमएल:

<div id="parent_1"> 
    <div id="child_1"></div> 
    <div id="child_2"></div> 
    </div>

सीएसएस: उदाहरण के लिए

#parent_1{ 
     position: relative; 
     width: 400px; 
     height: 400px; 
     background: gray; 
    } 
#child_1 { 
    position: absolute; 
    left:20px; 
    top:20px; 
    width:40px; 
    background:yellow; 
} 
#child_2 { 
    position: absolute; 
    right:20px; 
    top:20px; 
    width:40px; 
    background:blue; 
}

अब # parent_1 एक बॉक्स 400 * 400 और # child_1 माता पिता div के अंदर जगह होगी पैदा करेगा और इच्छा बाएं से 20px और शीर्ष से 20px तैनात।

स्रोत

2013-02-12 08:53:10 Amit

यह सवाल से संबंधित/जवाब कैसे देता है? – Dbob

आपके प्रश्नों का था, "एक div पर सीएसएस स्थिति भाई विभाजन की स्थिति को प्रभावित करता?", मेरे जवाब नहीं है, यह नहीं है, यह केवल बच्चे प्रभागों/बाल-तत्व केवल प्रभावित करता है। – Amit

यह अप्रत्यक्ष रूप से प्रभावित करता है। कृपया पूरी तरह से प्रश्न पढ़ें। – Dbob

div पर सीएसएस स्थिति कैसे भाई विभाजन की स्थिति को प्रभावित करती है?

उत्तर

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