CSS layer refer to applying z-index property to element that overlap to another element.
CSS z-index property set a overlap value and base on overlap value to element positioning set from each other.
CSS z-index property always work with absolute as well as relative positioning value.
CSS z-index possible value 0, positive (1 to 9999) and negative (-1 to -9999) value to set an element.
सीएसएस परत तत्व को जेड इंडेक्स प्रॉपर्टी को लागू करने के लिए संदर्भित करती है जो किसी अन्य तत्व को ओवरलैप करती है।
सीएसएस z- इंडेक्स प्रॉपर्टी ने ओवरलैप वैल्यू पर ओवरलैप वैल्यू पर आधार और एक दूसरे से एलीमेंट पोजिशनिंग सेट सेट किया है।
सीएसएस z- इंडेक्स प्रॉपर्टी हमेशा पूर्ण और साथ ही सापेक्ष स्थिति मान के साथ काम करती है।
एक तत्व सेट करने के लिए CSS z- अनुक्रमणिका संभव मान 0, सकारात्मक (1 से 99 99) और नकारात्मक (-1 से -99 99) मान
Property
|
Value
|
Description
|
z-index
|
z-index:9999;
/* top most layer*/
z-index:1; z-index:0; z-index:-9999; /* bottom last layer*/ |
Set
z-index layer value to know how to overlap each other.
|
Example Code:
<body>
<div style="background-color:orange;
width:130px;
height:150px;
top:15px;
left:100px;
position:relative;
z-index:1;">
</div>
<div style="background-color:#FF3333;
width:130px;
height:150px;
position:relative;
top:100px;
left:45px;
z-index:2;">
</div>
<div style="background-color:#CCFF66;
width:230px;
height:70px;
position:relative;
top:-270px;
left:145px;
z-index:3;">
</div>
</body>
<div style="background-color:orange;
width:130px;
height:150px;
top:15px;
left:100px;
position:relative;
z-index:1;">
</div>
<div style="background-color:#FF3333;
width:130px;
height:150px;
position:relative;
top:100px;
left:45px;
z-index:2;">
</div>
<div style="background-color:#CCFF66;
width:230px;
height:70px;
position:relative;
top:-270px;
left:145px;
z-index:3;">
</div>
</body>
Example Result:
