Visibility & z-index Explained Free web Tutorials #27
Visibility & z-index Explained
इस ट्यूटोरियल में, हम CSS की दृश्यता और z-index प्रॉपर्टी पर चर्चा करेंगे।
सीएसएस दृश्यता संपत्ति:
सबसे पहले, आइए अलग-अलग रंगों के चार बॉक्स बनाएं। यहां इस्तेमाल किया गया सीएसएस है:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visibility and Z-Index Property In CSS</title>
<style>
.box {
width: 170px;
height: 170px;
border: 2px solid black;
}
#box1 {
background-color: greenyellow;
}
#box2 {
background-color: rebeccapurple;
}
#box3 {
background-color: blue;
}
#box4 {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>
</html>
आउटपुट:
अब, दृश्यता संपत्ति पर हमारी चर्चा शुरू करते हैं:
दृश्यता गुण का उपयोग पृष्ठ के लेआउट को बदले बिना किसी HTML तत्व को छिपाने या दिखाने के लिए किया जाता है।
छिपा हुआ तत्व पृष्ठ पर स्थान का उपयोग करता है क्योंकि यह अभी भी है, लेकिन यह उपयोगकर्ता को दिखाई नहीं देता है।
अब, हम विजिबिलिटी प्रॉपर्टी की बेहतर समझ के लिए विजिबिलिटी को विज़िबल से हिडन ऑफ बॉक्स 2 में बदल देंगे। यहां इस्तेमाल किया गया सीएसएस है:
<style>
.box {
width: 170px;
height: 170px;
border: 2px solid black;
}
#box1 {
background-color: greenyellow;
}
#box2 {
background-color: rebeccapurple;
visibility: hidden;
}
#box3 {
background-color: blue;
}
#box4 {
background-color: lightcoral;
}
आप नीचे दी गई इमेज में देख सकते हैं कि बॉक्स 2 अब दिखाई नहीं दे रहा है, लेकिन यह अभी भी पेज पर जगह घेर रहा है।
प्रदर्शन के बीच अंतर: कोई नहीं; और दृश्यता: छुपा;
प्रदर्शन के बीच एक मामूली अंतर है: कोई नहीं; और दृश्यता: छुपा; सीएसएस की संपत्ति। आइए इस अंतर को उन बक्सों की मदद से समझते हैं जो हमने पहले बनाए थे।
बॉक्स 2 के लिए निम्नलिखित सीएसएस का प्रयोग करें:
#box2 {
background-color: rebeccapurple;
display: none;
}
उपरोक्त कोड में, हमने box2 का प्रदर्शन मान बदल दिया है। यहाँ परिणाम हैं:
उपरोक्त छवि में, आप स्पष्ट रूप से देख सकते हैं कि बॉक्स 2 वेबपेज से पूरी तरह से हटा दिया गया है, और पृष्ठ पर कोई खाली जगह नहीं बची है। लेकिन, जब हमने दृश्यता का उपयोग किया: छिपी हुई संपत्ति, बॉक्स 2 तत्व अभी भी स्थान पर कब्जा कर रहा था।
कुछ भी डिस्प्ले मत करो; - यह वेब पेज से एक HTML टैग को पूरी तरह से हटा देता है जैसे कि वह कभी नहीं था।
दृश्यता: छिपा हुआ; - यह टैग को अदृश्य बनाता है लेकिन तत्व को नहीं हटाएगा, और यह अभी भी पृष्ठ पर स्थान घेर लेगा।
सीएसएस में जेड-इंडेक्स संपत्ति:
इस ट्यूटोरियल की शुरुआत में, हमने अलग-अलग रंगों के चार बॉक्स बनाए। अब, इस प्रश्न का उत्तर देने का प्रयास करें: क्या होगा यदि एक बॉक्स दूसरे को ओवरलैप करता है? उपयोगकर्ता को कौन सा बॉक्स दिखाई देगा? यह वह जगह है जहां जेड-इंडेक्स संपत्ति तस्वीर में आती है। इसलिए, जब भी HTML तत्व एक-दूसरे के साथ ढहते हैं, तो छोटे z-index मान वाले तत्व को बड़े z-index मान वाले तत्व द्वारा कवर किया जाएगा।
नोट: Z-सूचकांक स्थिर स्थिति मान पर कार्य नहीं करता है। यह केवल स्थिति वाले तत्वों पर काम करता है: सापेक्ष, निरपेक्ष, निश्चित या चिपचिपा। हम नीचे दिए गए सीएसएस को लागू करके बॉक्स 1 और बॉक्स 2 की स्थिति बदल रहे हैं:
#box1 {
top: 69px;
position: relative;
background-color: greenyellow;
}
#box2 {
top: 34px;
position: relative;
background-color: rebeccapurple;
}
आउटपुट:
आप ऊपर की छवि में देख सकते हैं कि बॉक्स 2 बॉक्स 1 को ओवरलैप करता है। अब, हम box1 और box2 को z-index मान देंगे। यहां इस्तेमाल किया गया सीएसएस है:
#box1 {
top: 69px;
position: relative;
background-color: greenyellow;
z-index: 1;
}
#box2 {
top: 34px;
position: relative;
background-color: rebeccapurple;
z-index: 0;
}
उपरोक्त कोड में, हमने क्रमशः बॉक्स 1 और बॉक्स 2 का जेड-इंडेक्स मान सेट किया है। यहाँ परिणाम हैं:
आप देख सकते हैं कि बॉक्स 1 बॉक्स 2 को ओवरलैप कर रहा है क्योंकि बॉक्स 1 का जेड-इंडेक्स मान बॉक्स 2 के जेड-इंडेक्स मान से अधिक है। तो, इस तरह आप आसानी से किसी HTML तत्व की दृश्यता और z-index मान को बदल सकते हैं।
यह ट्यूटोरियल यहां समाप्त होता है और मैं आपको अगले ट्यूटोरियल में देखूंगा।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Visibility and z-index</title>
<style>
.box{
width: 170px;
height: 170px;
border: 2px solid black;
}
#box-1{
position: relative;
top: 49px;
z-index: -35;
background-color: green; }
#box-2{
position: relative;
top: 14px;
/* z-index will work only for position: relative, absolute, fixed or sticky; */
z-index: -165;
/* will hide the element and the space */
/* display: none; */
/* will hide the element but will show its empty space */
/* visibility:hidden; */
background-color: red;
}
#box-3{
background-color: blue; }
#box-4{ background-color: yellow; }
</style>
</head>
<body>
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
<div class="box" id="box-4"></div>
</body>
</html>
