In CSS, z-index is the property to control the 3D Z position of the element (for example DIV). This property is useful when you have element that has absolute or fixed position.
In the real work application, we use z-index for the date picker, time picker, numeric keypad, any popup list, prompt, etc.
Here is the find out:
1. If you set the z-index for the DIV, it works as expected. Not strange thing will happen in this simplest case.
<body>
<div class="container1">helo</div>
<body>
2.But, if you have the following structure, then, it might work unexpectedly.
First of all, if you set the z-index for the inner1 & inner2, the z-index is relative to container1. While container2 is relative to the body.
<body>
<div class="container1">Container 1
<div class="inner1">Inner 1</div>
<div class="inner2">Inner 2</div>
</div>
<div class="container2">Container 2
</div>
<body>
For example, you have the following settings for the z-index where the final output is container2 is always at the top that covers container1 and hence it covers inner1 and inner2.
container1 - z-index: 100
inner1 - z-index: 300
inner2 - z-index: 400
container2 - z-index: 200
All DIV elements have the following settings.
position: absolute;
top: 0;
left:0;
width:100px;
height:100px;
overflow:hidden;
No comments:
Post a Comment