इस Tutorial में हम आपको CSS z-index Property in Hindi के बारे में पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
आपने Word Document में Picture के ऊपर Text लिखा होगा. इस स्थिति में Content ऊपर होता हैं और Image Content के नीचे रहती हैं.
इसी तरह हम Webpages में भी एक Element के ऊपर दूसरे Element के ऊपर Show करा सकते हैं. या किसी Image के ऊपर Content को दिखा सकते हैं. इस Situation को Layering या Stack Ordering कहा जाता हैं.
Stack Order में Overlap Elements का क्रम तय किया जाता हैं. यह क्रम एक के ऊपर एक के क्रम में Define होता हैं.
जिस Element का Stack Order ज्यादा होता हैं. वह Element सबसे ऊपर दिखाई देता हैं. और जिस Element की Stack Value सबसे कम होती हैं. वह Element अन्य Elements से नीचे दिखाई देता हैं.
Elements का Stack Order CSS की z-index Property द्वारा Define किया जाता हैं. और यह Property केवल Positioned Elements के लिए ही Stack Order तय करती हैं.
Note:- Elements static Positioned नही होना चाहिए.
Different Type of z-index-style Property Values
Elements के Stack Order को Control करने के लिए z-index Property की कई Values उपलब्ध हैं. इनके बारे में नीचे बताया जा रहा हैं.
auto – यह Elements का Default Order होता हैं. इस Situation में Browser Stack Order को तय करता हैं.
number – यह कोई भी Integer Number होता हैं. जो आपके Overlap Elements की संख्या पर निर्भर करता हैं.
initial – इस Value द्वारा Default Order तय होता हैं.
inherit – इस Value में Parent Element से Order तय होता हैं.
Syntax of z-index Property
{z-index: auto | integer-number | initial | inherit;}
<p>नीचे हम 3 Div Define कर रहे हैं. जिसमे हमने DIV1 को 2 Number में दिखाया हैं. Div1 को 3 Number पर दिखाया हैं. और Div3 को पहले नम्बर पर दिखाया है. </p>
<div id=”div1″>This is Div1.</div> <div id=”div2″>This is Div2.</div> <div id=”div3″>This is Div3.</div> </body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
नीचे हम 3 Div Define कर रहे हैं. जिसमे हमने DIV1 को 2 Number में दिखाया हैं. Div1 को 3 Number पर दिखाया हैं. और Div3 को पहले नम्बर पर दिखाया है.
This is Div1.
This is Div2.
This is Div3.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS z-index Property की पूरी जानकारी दी हैं. आपने विभिन्न प्रकार की z-index Property Values के बारे में भी जाना हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
