CSS Z-Index Property
आपने Word Document में Picture के ऊपर Text लिखा होगा। इस स्थिति में Content ऊपर होता हैं और Image Content के नीचे रहती हैं। इसी तरह हम Web Pages में भी एक 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 Property Example
<!DOCTYPE html>
<html>
<head>
<title>CSS z-index Property Example</title>
<style type=”text/css”>#div1 {
width:250px; height:250px;background:yellow;position:absolute;z-index:2;top:160px;left:160px;
}
#div2 {
width:250px; height:250px;background:green;position:absolute;z-index:1;top:120px;left:120px;
}
#div3 {
width:250px; height:250px;background:red;position:absolute;z-index:3;top:200px;left:200px;
}
</style>
</head>
<body>
<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>
OUTPUT-
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment