What is Z Index in CSS in Hindi

by

CSS में elements की position को बदलने के css position property का इस्तेमाल होता है | और position property कुछ helper properties के साथ काम करता है, वो है top, bottom, left और right property| CSS3 में एक और property जोड़ी गयी है जो position property के साथ काम करता है, वो है z-index property |

Table of Contents hide
1 CSS Z-Index Property in Hindi
2 अन्य CSS tutorial के सुझाव

CSS Z-Index Property in Hindi

z-index property से elements की position को ऊपर से निचे या फिर निचे से ऊपर की और ले जाया जा सकता है | जैसे stack order में रखी चीजें ऊपर से निचे सेट होती है, वैसे ही z-index से elements को ऊपर से निचे सजाई जाती हैं |

जिस element की z-index value ज्यादा होगी वो ऊपर दिखेगा और जिस element की value कम होगी वो निचे दिखेगा |

पेहले हम elements को vertically(y-axis) और horizontally(x-axis) तरीके से सजाना सिखें थे| अब z-index के मदद से elements को आगे पीछे करना सीखेंगें |

z-index हमेसा position property के साथ इस्तेमाल होती है | अगर position value relative, absolute या fixed ली गयी है तभी z-index काम करेगा |

चलिए एक उदाहरण में देखतें हैं 3 div को stack order में रख कर और फिर z-index से उस order को बदल कर |

<!DOCTYPE html>
<html>
 <head>
  <title>CSS z-index Property Example</title>
  <style>
    body{ background-color:gray; }
    div{
	 width:100px;
	 height:100px;
         border:2px solid black;
	 margin:30px;			 
	}
	#div1{
	       background-color:red;
	       position:absolute;
	       top:0px;
	       left:0px;
	     }
	#div2{
	        background-color:green;			 
		position:absolute;
		top:20px;
		left:20px;
	    }
       #div3{
	       background-color:blue;			  
	       position:absolute;
	       top:40px;
	       left:40px;
	    }			  
  </style>
 </head>
 <body>  
   <div id="div1">DIV1</div>
   <div id="div2">DIV2</div>
   <div id="div3">DIV3</div>   
 </body>
</html>

ऊपर के कोड इस तरह की आउटपुट आएगा

css position property example

आउटपुट में आप देख सकतें हैं हमने 3 div लिया और उसे position absolute दे कर और top, left property से एक stack order में सजाया है| अब हम z-index की मदद से div1 को ऊपर और div3 को निचे लाएंगे | पूरा कोड same रहेगा सिर्फ z-index property extra में लिखी जायेगी |

#div1{
       background-color:red;
       position:absolute;
       top:0px;
       left:0px;
       z-index:3;
  }
#div2{
	background-color:green;			 
	position:absolute;
	top:20px;
	left:20px;
	z-index:2;
}
#div3{
        background-color:blue;			  
	position:absolute;
	top:40px;
	left:40px;
	z-index:1;
}

output

z-index property example

ऊपर के परिणाम में देखिये z-index से div1 ऊपर आ गया और div-3 निचे चला गया |

आशा है आपको z-index property का इस्तेमाल समझ आया होगा |

अन्य CSS tutorial के सुझाव