Z-index Definition:-
z-index property specifies stack order of any element or it only works for the positioning of an element i.e when position is absolute, relative and fixed.The vale of Z-index mostly used -1, 0 ,1
-1 is used for the positioning of element at background of any text and image while 0 or 1 take foreground position of the text/image.
It determines the stack level of an HTML code. The stack level refers to the element position on z axis. Higher the vale of z-index the element will be more closer to the top of the stacking order.
Using z-index for a text and image:
image{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
image1{
position: absolute;
left: 40px;
top: 0px;
z-index: 0;
}
image2{
position: absolute;
right: 20px;
bottom: 0px;
z-index: 1;
}
You can understand from above code that how z-index is working on different values, when the value is -1 the element will be more closer to the top of stacking order.
when the value of z-index 0 or 1 it will shown on foreground position.
0 Comment(s)