सीएसएस जेड-इंडेक्स

जब आप CSS के साथ अपना लेआउट डिज़ाइन कर रहे होते हैं, तो आप अक्सर तत्वों को ऊपर/नीचे या बाएँ/दाएँ स्थान देते हैं। z-index हमें तत्वों को Z-अक्ष पर तीसरे आयाम पर एक स्टैकिंग प्रभाव (एक दूसरे के ऊपर) के साथ स्थानांतरित करने की अनुमति देता है।

z-index संपत्ति या तो auto लेती है कीवर्ड या पूर्णांक। ये सभी वैध घोषणाएं हैं:

z-index: auto;
z-index: -1;
z-index: 9999;

नोट :जेड-इंडेक्स को लागू करने के लिए, हमें position का उपयोग करके तत्वों को भी स्थान देना होगा संपत्ति या तो सापेक्ष, निरपेक्ष या निश्चित के रूप में। यदि कोई स्थिति निर्दिष्ट नहीं है तो यह z-index: auto . लागू करने के समान होगा और कोई स्टैकिंग प्रसंग लागू नहीं किया जाएगा।

इसे ध्यान में रखते हुए, आइए एक उदाहरण देखें।

आइए कुछ गिनी पिग की स्थिति बनाएं

आप इस उदाहरण को कोडपेन पर देख सकते हैं। इसके साथ खेलें और मेरे साथ कोड करें!

हम दो गिनी सूअर रखेंगे, या Cuys (जो बहुत प्यारा लगता है)। आइए कल्पना करें कि हम गर्मियों में हैं इसलिए यह 90+ डिग्री बाहर है। Cuy#1 को एक झील के अंदर रखा जाएगा, उसके पास अच्छा समय होगा। Cuy#2 बहुत आलसी है इसलिए हमें उसे जगाने के लिए उसे कुछ कॉफी देनी होगी! इसलिए हम अपने Cuy#2 को कॉफ़ी के साथ रखेंगे ताकि वह इसे पी सके।

बिना किसी पोजीशनिंग या CSS के हमारी छवियां कमोबेश इस तरह दिखती हैं:

विचार यह है कि ज़ेड-इंडेक्स का उपयोग करके एक स्टैकिंग संदर्भ बनाया जाए ताकि झील और कॉफी के शीर्ष पर कुछ छवियों को रखा जा सके।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

साथ ही, याद रखें कि जेड-इंडेक्स को लागू करने के लिए हमें अपने तत्वों में पोजिशनिंग जोड़ने की जरूरत है। आइए आगे बढ़ते हैं और हमारे Cuy#1 को स्थान देते हैं:

img.cuy.one {
  position: absolute;
}

हमारा दोस्त कहाँ है? आइए आगे बढ़ते हैं और एक उच्च स्टैकिंग संदर्भ जोड़ते हैं ताकि यह झील के शीर्ष पर हो:

img.cuy.one {
  position: absolute;
  z-index: 1;
}

वाह! हमारा क्यू झील के ऊपर है। अब हमें इसे झील के अंदर रखने के लिए कुछ गद्दी जोड़ने की ज़रूरत है, लेकिन मैं आपको इसके साथ खेलने के लिए छोड़ दूँगा।

अब जब हम जानते हैं कि z-index . का उपयोग करके स्टैकिंग संदर्भ कैसे बनाया जाता है , हम अपने दूसरे जानवर को बहुत आसानी से रख सकते हैं:

img.cuy.two {
  position: absolute;
  width: 160px;
  padding: 100px;
  z-index: 1;
}

फिर से पैडिंग छवि की सटीक स्थिति के लिए होगी, और चौड़ाई का उपयोग केवल हमारे छोटे दोस्त के आकार को निर्दिष्ट करने के लिए किया जाता है। इसके साथ, हमने अपना काम पूरा कर लिया है और हर कोई खुश है और तरोताजा महसूस करता है:

निष्कर्ष

z-index . के साथ खेलना दिलचस्प लेआउट विचारों के लिए रास्ता बनाता है। कोडपेन पर मैंने पॉप चैट डिज़ाइन का दूसरा उदाहरण भी प्रदान किया है और सब कुछ के ऊपर z-index के साथ। इसे देखें!

मत भूलना कि आपको हमेशा तत्वों की स्थिति बनानी चाहिए या आपका जेड-इंडेक्स काम नहीं करेगा। पोजिशनिंग को हटाकर कोडपेन के आसपास खेलने की कोशिश करें और इसे अपने लिए देखें।

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