Hi,
I dont know what is the Z-index?
Can you explain with an example,
It's practically the stacking order of elements. E.g.
You have one div with a z-index of 1 and you got another smaller div with a z-index of 2. The div with the higher z-index will be infront. So in this case, the smaller div will be rendered ontop of the div with a z-index of 1
Z- index is nothing but a stacking order. The order of elements to be placed. For that you can set the zindex. An good example is Website menus goes behind flash or images.
Below is the example to clearly identify the purpose of zindex
<html>
<body>
<div id="myDiv"
style="position:absolute;
left:100px;
top:50px;
width:100px;
height:50px;
z-index:1;
background-color:red;">
This div is absolute positioned with an z-index of 1.
</div>
<div style="position:absolute;
left:100px;
top:50px;
z-index:12;
height:50;
background-color:blue;">
This is a div element with a z-index of 12.
</div>
<button onclick="myDiv.style.zIndex = 20;">
Bring red to front
</button>
</body>
</html>
Hi rajarajan,
Really Thank Q very much,
after ur reply i have tried with some examples
Z- index is nothing but a stacking order. The order of elements to be placed. For that you can set the zindex. An good example is Website menus goes behind flash or images.
Below is the example to clearly identify the purpose of zindex<html> <body> <div id="myDiv" style="position:absolute; left:100px; top:50px; width:100px; height:50px; z-index:1; background-color:red;"> This div is absolute positioned with an z-index of 1. </div> <div style="position:absolute; left:100px; top:50px; z-index:12; height:50; background-color:blue;"> This is a div element with a z-index of 12. </div> <button onclick="myDiv.style.zIndex = 20;"> Bring red to front </button> </body> </html>
Welcome! Please mark as solved if it is solved!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.