Z-Index is a stack order of an element. The Element has the higher stack order it will appear front and element have the lower stack order it will appear next of the higer stack order. If you have two images, one is background and another one is your photo. If you want overlap your photo in the background, we can use the z-index.Higher z-index value come upper than lower z-index value. If I set background z-index value is 5 and photo z-index value is 10 mean background will present below and photo will overlap the background.
Z-Index will one support for the position property. And its only support only for position:relative, position:absolute and position:fixed. This one not support position:static. Normally, all the elements in the web page are position:static.
Below example, I place the monkey image over the green background. And I give the position absolute to both the background and monkey face. And I assign z-index: 1 to background and z-index:5 to monkey face.
Now the monkey is facing on top of the background green.
CSS:
.container{
display:block;
position: relative;
}
.bg{
width: 200px;
height: 200px;
background: #389840;
position: absolute;
z-index: 1;
}
.ph img{
width: 50px;
height: 50px;
position: absolute;
z-index: 5;
top: 25%;
left: 7%;
}HTML
<div class="container"> <div class="bg"> </div> <div class="ph"> <img src="monkey.jpg"/> </div> </div>
Output:
| Feature | Chrome | Firefox | IE | Opera | Safari | Android | iOS |
|---|---|---|---|---|---|---|---|
| Basic support | Work | Work | 4+ | Work | Work | 4+ | Work |
