जेड-इंडेक्स और सापेक्ष/पूर्ण पोजिशनिंग

Question

मुझे जेड-इंडेक्स और पोजीशनिंग के साथ कुछ समस्याएं आ रही हैं। मूल रूप से, जब आप मेनू आइटम पर ले जाएं, (घर, के बारे में आदि), रंग की बौछार मेनू के नीचे लोड होनी चाहिए:

http://www.saradouglas.net/home

स्टाइल शीट यहाँ स्थित है: http://www.saradouglas.net/wp-content/themes/sara-douglas-theme/style.css

यह ठीक काम किया है जब प्रत्येक छप div पूर्ण स्थिति पर सेट किया गया था, लेकिन मुझे एहसास हुआ कि ये अलग-अलग स्क्रीन संकल्पों में अलग-अलग स्थानों पर दिखाई देंगे। मैंने सोचा कि यह सिर्फ सापेक्ष स्थिति में बदलने का मामला होगा, और उसके बाद समन्वय को तदनुसार समायोजित करेगा। दुर्भाग्यवश अब मेरे स्प्लेश मेनू के नीचे दिखाई नहीं देते हैं, जैसे उन्हें चाहिए।

स्पष्टीकरण के लिए, मैं मेनू के नीचे स्पेशल दिखाना चाहता हूं - इसलिए मेनू हमेशा स्पलैश के शीर्ष पर दिखाई देना चाहिए। मेन्यू को सापेक्ष में सेट करने के बाद से यह केवल एक समस्या बन गई है, और ये स्प्लेश पूर्ण हैं।

मुझे आशा है कि यह ठीक करने के लिए एक आसान है और मुझे बस कुछ याद आ रहा है। मुझे उम्मीद है कि यहां कोई मुझे बता सकता है कि मैं गलत कहां गया हूं और समाधान प्रदान करता हूं!

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

अग्रिम धन्यवाद।

रॉस

Answer 1

की अगर मैं सही ढंग z-इंडेक्सों का पूर्वता क्रम याद से यह कर सकते हैं इस

• कैनवास की तरह कुछ (जहां है तत्व तैयार की है/माता-पिता drawable क्षेत्र)
• bg छवियों
• z- सूचकांक: -1
• डिफ़ॉल्ट (0)
• z- सूचकांक: 1+

तो जब आप किसी भी बच्चे तत्व -1 का z- इंडेक्स देते हैं, यह माता-पिता पृष्ठभूमि नीचे माता-पिता पूर्वता की वजह से नहीं जाएगी।

यहां आपका समाधान है। बस फायरबग पर कोशिश की और यह काम करता है:

1. #menu से बीजी छवि को निकालें और एलआईएस से पहले ul.menu के नीचे एक अलग div जोड़ें।
2. इस div को नीचे सीएसएस दें।
3. अब उन सभी ब्रश स्ट्रोक को जेड-इंडेक्स -1 से छोटा करें। -2 काम करता है।

और यह होना चाहिए।

सीएसएस:

position:absolute; 
top:0; 
bottom:0; 
left:0; 
right:0; 
z-index:-1; 
background: url(...); 

मैं जानता हूँ कि यह नहीं है कि इतना अर्थ लेकिन, हे यह काम करता है है, है ना? : पी

Answer 2

आप अपने मेनू div में सापेक्ष स्थिति निर्धारित करना चाहिए फिर मेनू के div में पूर्ण स्थिति divs जोड़ें। फिर विभिन्न स्क्रीन संकल्प यह समस्या नहीं है।

Answer 3

आप बस के बजाय उल पर bg, paddings और ऊंचाई की स्थापना <div id="menu">