: रिश्तेदार * बिना * एक सरल उदाहरण बदलते संरचना

Question

:

HTML:

<div id="A"> 
    <div id="B"></div> 
    <div id="C"></div> 
    <div id="D"></div> 
</div> 

सीएसएस:

#A,#B,#C,#D{width:100px;height:100px} 
#A{position:relative;width:220px;top:20px;left:20px;background:#FF0000} 
#B{position:absolute;top:0;left:0;background:#FFFF00} 
#C{position:absolute;top:10px;left:80px;background:#00FF00} 
#D{position:absolute;background:#00FFFF;top:0;right:0} 

एक बेला के रूप में: http://jsfiddle.net/h6BNz/

ठीक इसलिए CB के सामने औरके पीछे है, और A के सापेक्ष स्थित है। मैं इसे दस्तावेज के सापेक्ष स्थिति में रखना चाहता हूं, लेकिन इसे बी और डी (दोनों जेड-इंडेक्स और टैब ऑर्डर में) के बीच रखें। यदि C की स्थिति position:fixed पर बदल दी गई है, तो यह वही है जो मैं चाहता हूं (स्पष्ट रूप से) पृष्ठ के साथ स्क्रॉल नहीं कर रहा हूं।

मैंने बहुत सारे समाधान देखे हैं जिनमें इसे पूरा करने के लिए अपने माता-पिता से div को तोड़ना शामिल है, लेकिन इसे ज़ेड-इंडेक्स और टैब ऑर्डर सेट करने की आवश्यकता होगी जो प्रबंधन के लिए एक दुःस्वप्न की तरह दिखता है (यह एक प्लगइन है, इसलिए आसपास के कोड मेरे नियंत्रण के बाहर है)।

मैं CB या D तोड़ने या संरचना को बदलने के बिना वास्तव में पूर्ण स्थिति कैसे दे सकता हूं? जावास्क्रिप्ट इसे स्थापित करने के लिए ठीक है, लेकिन मुझे पूरी तरह से गोल होने के लिए अंतिम पृष्ठ की स्थिति की आवश्यकता है (यदि आप रुचि रखते हैं तो मेरे कुछ अन्य प्रश्न देखें), इसलिए मुझे नहीं लगता कि मैं absolutePosition - absolutePositionOfContainer विधि का उपयोग कर सकता हूं।

Answer 1

यदि #A में position: relative है तो इसके अंदर कुछ भी #A के सापेक्ष स्थित होगा।

तो #B#C और #D सब #A द्वारा निहित कर दिया जाएगा। यदि आप स्थिति के साथ कुछ अंदर हैं तो आप दस्तावेज़ के सापेक्ष इसे स्थिति में नहीं रख सकते हैं।

आप नकारात्मक मार्जिन का उपयोग #A के बाहर रखने के लिए कर सकते हैं, हालांकि, #Aoverflow: visible प्रदान किया गया है।