particles.js स्क्रिप्ट (Z-index)

Question

पर बटन और लिंक डालकर मैं particles.js स्क्रिप्ट का उपयोग करने की कोशिश कर रहा हूं, इसलिए कण पूरे पृष्ठ (पारदर्शी पृष्ठभूमि के साथ) पर फ़्लोट करेंगे। मुझे कणों के ऊपर कुछ लिंक और बटन खींचने की ज़रूरत है, इसलिए वे क्लिक करने योग्य होंगे।

link के संबंध में, क्या मैं बड़े "बी" तत्व को बड़े "बी" तत्व पर बड़े "बी" तत्व के दौरान बड़े "बी" तत्व को रखने में सक्षम हूं?

मैं जो सोच रहा था वह था कि रिश्तेदार का मतलब है कि जेड-इंडेक्स अपने माता-पिता के सापेक्ष है, जबकि अगर मैं सभी तत्वों को पूर्ण रूप से सेट कर दूंगा, तो बड़े "सी" पर छोटे "बी" को प्रदर्शित करना संभव होगा, लेकिन ऐसा नहीं है। क्या कोई इसे मेरे लिए समझा सकता है?

<div id="A">A<div id="a">a</div></div> 
<div id="B">B<div id="b">b</div></div> 
<div id="C">C<div id="c">c</div></div> 

Answer 1

स्थिति z-index का संदर्भ नहीं देती है। यह स्क्रीन पर एक्स, वाई स्थिति को संदर्भित करता है। सीएसएस स्थिति संपत्ति here के बारे में पढ़ें।

जेड-इंडेक्स जेड-अक्ष पर केवल पूर्ण स्थिति है। इसलिए एक उच्च सूचकांक कम से कम ढेर।

स्थिति फिर भी आपके div के बाहर divs के लिए z-axis पर प्रभाव डालती है, क्योंकि अलग-अलग मान अलग-अलग प्रतिपादन आदेशों को इंगित करते हैं। यदि आप अपने द्वारा प्रदान किए गए पृष्ठ पर क्रोम डेवलपर टूल खोलते हैं और स्थिर से संबंधित में बदलते हैं तो आप इस प्रभाव को देख सकते हैं।

हालांकि ए में 37 की अनुक्रमणिका है, यह बी से ऊपर होगी क्योंकि इसे ए के बाद प्रस्तुत किया जाता है। जेड-इंडेक्स के लिए विश्वसनीय काम करने के लिए आपको उन्हें एक-दूसरे में ढेर करना चाहिए।

यदि आप अपना कोडपेन कण उदाहरण खोलते हैं और क्रोम डेवलपर टूल खोलते हैं तो आप देख सकते हैं कि एफपीएस बॉक्स अजीब व्यवहार कैसे करता है यदि आप विवरण पर क्लिक करते हैं। यह इसके लिए particle.js div के बाहर है।

संक्षेप में, यदि आप देखना चाहते हैं कि क्या हो रहा है, तो क्रोम में डेवलपर टूल की तरह कुछ उपयोग करें। फ़ायरफ़ॉक्स, ओपेरा और आईई के समान उपकरण हैं।

यहां codepen पर एक कामकाजी उदाहरण है। अपने सीएसएस करने के लिए वर्ग जोड़ें और पृष्ठ पर div डाल:

.test { 
    index: 50; 
    top: 100px; 
    position: absolute; 
} 

Answer 2

मैं क्या सुझाव है, के लिए एक उच्च मूल्य z- सूचकांक देना है अपने a (जैसे z-index:9999;), लेकिन यकीन है कि a की मूल तत्वों बनाने छोटे जेड-इंडेक्स मान नहीं हैं क्योंकि तत्व के जेड-इंडेक्स को उसके माता-पिता द्वारा निर्धारित मूल्य से सीमित किया जाएगा।

अपने प्रश्न के लिए

तो बी 'बड़ा से अधिक तत्व "सी सी" बड़ी से अधिक तत्व "बी" तत्व जबकि छोटे होने "" मैं बड़ा डाल करने में सक्षम हूँ "" तत्व? ", जवाब कोई है क्योंकि आपके छोटे "बी" तत्व का जेड-इंडेक्स अपने माता-पिता द्वारा सीमित होगा, जो कि बड़ा "बी" तत्व है और यह बड़ा "बी" तत्व "सी" तत्व से नीचे है।

Here's a working sample.container के साथ लिंक काम करते समय कणों के नीचे दिखाए गए हैं।

a{ 
    position:relative; 
    z-index:9999; 
} 

और माता-पिता के लिए सुनिश्चित करें (इस मामले में, .container) या 9999 या अधिक से अधिक की एक z- इंडेक्स मान (किसी भी z- सूचकांक की तुलना में अधिक से अधिक मूल्य होना चाहिए: क्या मायने रखती है कि आप इस होना चाहिए वह यह है कि पैटर्न), अन्यथा यह a के जेड-इंडेक्स को सीमित करेगा और यदि यह पैटर्न के जेड-इंडेक्स से कम है, तो बटन क्लिक-सक्षम नहीं होंगे।

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