इस लेख को पढ़ने के परिणामस्वरूप, आप सीएसएस के साथ अतिव्यापी divs बनाने में सक्षम होंगे। इस उद्देश्य के लिए, सबसे पहले, हम 'के बारे में जानेंगे' स्थान ' तथा ' Z- सूचकांक ' गुण।
आएँ शुरू करें!
सीएसएस 'स्थिति' संपत्ति
HTML में, आप 'का उपयोग करके तत्वों की स्थिति निर्धारित कर सकते हैं' स्थान ' संपत्ति। वेब पेज पर किसी तत्व की अंतिम स्थिति उसके दाएं, बाएं, ऊपर, नीचे और जेड-इंडेक्स गुणों के संयोजन से निर्धारित होती है।
वाक्य - विन्यास
स्थिति संपत्ति का सिंटैक्स है:
स्थान : मूल्य
की जगह ' मूल्य ”, आप निरपेक्ष, सापेक्ष, निश्चित और चिपचिपा जैसे तत्वों की विभिन्न स्थितियाँ निर्धारित कर सकते हैं।
सीएसएस 'जेड-इंडेक्स' संपत्ति
' Z- सूचकांक 'प्रॉपर्टी का उपयोग तत्वों के स्टैक ऑर्डर को सेट करने के लिए किया जाता है। जेड-इंडेक्स के अधिक मूल्य वाले तत्व को अन्य लोगों के सामने रखा जाता है।
वाक्य - विन्यास
जेड-इंडेक्स प्रॉपर्टी का सिंटैक्स इस प्रकार है:
Z- सूचकांक : ऑटो |नंबरऊपर दिए गए सिंटैक्स में, ' ऑटो ' का उपयोग मूल तत्व के अनुसार क्रम निर्धारित करने के लिए किया जाता है, जबकि मैनुअल अनुक्रम के लिए, ' संख्या ' को z-index प्रॉपर्टी के मान के रूप में सेट किया गया है।
अब, CSS के साथ अतिव्यापी divs बनाने के व्यावहारिक उदाहरण पर चलते हैं।
उदाहरण 1: दूसरे डिव को पहले वाले के साथ ओवरलैप करना
HTML सेक्शन में, हम दो डिव बनाएंगे और अलग-अलग क्लास के नाम “के रूप में असाइन करेंगे। div1 ' तथा ' div2 '
एचटीएमएल
< तन >< डिव कक्षा = 'div1' >< / डिव >
< डिव कक्षा = 'div2' >< / डिव >
< / तन >
अब, CSS पर जाएँ और दिए गए निर्देशों का पालन करें:
- स्थिति संपत्ति का मान 'के रूप में सेट करें शुद्ध ” जगह div1 के लिए ठीक वही जगह है जहाँ आप चाहते हैं।
- Div1 की ऊंचाई और चौड़ाई को “के रूप में समायोजित करें” 250px ' तथा ' 300px '
- जेड-इंडेक्स का मान 'के रूप में सेट किया गया है 1 '
- Div1 की पृष्ठभूमि का रंग 'के रूप में सेट करें आरजीबी(4, 3, 75) '
सीएसएस
.div1 {स्थान : शुद्ध ;
कद : 250px ;
चौड़ाई : 300px ;
Z- सूचकांक : 1 ;
पार्श्वभूमि : आरजीबी ( 4 , 3 , 75 ) ;
}
उत्पादन
पहला div सफलतापूर्वक रखा गया है। अब, हम दूसरे div की ओर बढ़ते हैं।
Div2 को ओवरलैप करने के लिए, दिए गए निर्देशों का पालन करें:
- Div2 की स्थिति गुण, चौड़ाई और ऊँचाई का मान “के समान” सेट करें div1 '
- जेड-इंडेक्स का मान 'के रूप में सेट करें दो 'इसे पहले डिव के सामने रखने के लिए।
- Div2 के लिए एक अलग पृष्ठभूमि रंग 'के रूप में सेट करें' आरजीबी(0, 204, 255) '
- Div2 के मार्जिन को 'के रूप में सेट करें' 50px 'मार्जिन-टॉप और मार्जिन-लेफ्ट वैल्यू के रूप में।
- Div2 की अपारदर्शिता को 'के रूप में सेट करें' 0.7 '
सीएसएस
.div2 {स्थान : शुद्ध ;
चौड़ाई : 300px ;
कद : 250px ;
Z- सूचकांक : 3 ;
पार्श्वभूमि : आरजीबी ( 0 , 204 , 255 ) ;
अंतर : 50px ;
अस्पष्टता : 0.7 ;
}
उत्पादन
Div2 सफलतापूर्वक div1 के साथ ओवरलैप करता है।
यदि आप div1 को div दो के शीर्ष पर सेट करना चाहते हैं, तो आपको केवल z-index का मान बदलना होगा। आइए इसका एक उदाहरण देखते हैं।
उदाहरण 2: पहले डिव को दूसरे के साथ ओवरलैप करना
इस उदाहरण में, हम दोनों divs के z-index के मान को बदल देंगे। में ' .div1 'सीएसएस फ़ाइल का वर्ग, का मान सेट करें' Z- सूचकांक 'संपत्ति के रूप में' दो ':
Z- सूचकांक : दो ;उसके बाद, में ' .div2 'वर्ग,' का मान सेट करें Z- सूचकांक 'संपत्ति के रूप में' 1 ':
Z- सूचकांक : 1 ;नतीजतन, पहला डिव दूसरे डिव के सामने रखा जाएगा:
हमने सीएसएस के साथ दो अतिव्यापी divs बनाने के लिए सबसे आसान तरीका संकलित किया है।
निष्कर्ष
' स्थान ' तथा ' Z- सूचकांक “संपत्ति का उपयोग CSS में अतिव्यापी divs बनाने के लिए किया जाता है। डिफ़ॉल्ट रूप से, z-index का मान 1 है, जो बताता है कि नव निर्मित div को मौजूदा div के सामने रखा जाएगा। हालांकि, आप ओवरलैपिंग अनुक्रम को समायोजित करने के लिए अपनी आवश्यकताओं के अनुसार कोई भी मान निर्दिष्ट कर सकते हैं। इस लेख में, हमने सीएसएस के साथ ओवरलैपिंग डिव बनाने के तरीकों की पेशकश की है।