Updated April 12, 2023
Definition of jQuery zindex
The jQuery zindex() function is used to sets or gets the z-index for an element. The jQuery zindex() function is a built-in function in jQuery. The zindex() function without any parameter is used to get the z-index for an element. The zindex() function with parameter (the z-index property value) is used to set the z-index value for an element. The z-index specifies the order of stack for an element. The element which has the highest order of stack always appear in front of the element which have the lowest order of stack. The z-index uses on positioned elements like position: absolute, position: relative, position: sticky or position: fixed. The default value of the z-index is auto. The deprecated zindex() function has been removed from the jQuery UI 1.10 version library onwards, instead of this, we can use it as css property.
Syntax:
Syntax to get the z-index value of an element:
.zIndex();Return value – The return value of this function is the z-index property value for an element.
Syntax to set the z-index value of an element –
.zIndex(zindex);Parameters:
zindex – This is not an optional parameter, that specifies the value of z-index property.
Working of jQuery zindex() Function
The jQuery zindex() function is used to set or get the z-index property value for an element. To the zindex() function if we do not pass any parameter, then zindex() function return the z-index value for an element, whether the z-index is directly set on the element or it is set on one of its ancestors. To find the z-index value, the zindex() function starts from the specified element and walk up the DOM until determines an element which is positioned and has set a z-index. But if no such element is present, then the zindex() function returns a 0 value.
The zindex() function with parameter is set the z-index value for an element. It perform same as the .css(“zIndex”, zIndex) property does.
Examples for jQuery zIndex() Function
Next, we write the HTML code to understand this function more clearly with the following example, where the jQuery zindex property is used to get the zindex value of the element, as below.
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery zindex function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<script>
$(document).ready(function() {
$("#id1").on("click", function() {
alert("The first div z-index value is "+$('#id1').css('z-index'));
});
$("#id2").on("click", function() {
alert("The second div z-index value is "+$('#id2').css('z-index'));
});
$("#id3").on("click", function() {
alert("The third div z-index value is "+$('#id3').css('z-index'));
});
});
</script>
<body>
<body>
<br><br>
<div id = "id1"; style = "background-color:red;
width :300px;
height :100px;
top :10px;
left :80px;
position :relative;
z-index :3;">
</div>
</div>
<div id = "id3"; style = "background-color:yellow;
width :300px;
height :100px;
top :-60px;
left :35px;
position :relative;
z-index :2;">
</div>
<div id = "id2"; style = "background-color:green;
width :300px;
height :100px;
top :-220px;
left :120px;
position :relative;
z-index :1;">
</div>
</body>
</html>An output of the above code is:
Once we click on the red box, the output is:
when we click on the green box, the output is:
And when we click on the yellow box, the output is:
As in the above program, the three boxes are created and assign some z-index values to them to stack up. And later each box is attached to the “onclick” event, so once we click on it the event gets to generate and the z-index value is printing by using this “$(‘#id’).css(‘z-index’)” code.
Example of jQuery zIndex() function for single parameter passing-
Next, we write the html code to understand the jQuery zIndex() function, where the zIndex() function is used to execute the function and passing a single object to the function, as below.
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery zindex() function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<script>
function fun1() {
document.getElementById("id1").style.zIndex = "-1";
}
function fun2() {
document.getElementById("id2").style.zIndex = "-1";
}
</script>
<body>
<h1> Change the z-index of the below boxes by clicking on them </h1>
<div id = "id2" onclick = "fun2()" style="background-color: yellow;
position: relative;
width: 300px;
height: 100px;
top: 50px;
left: 30px;
border: 1px solid black;" >
<h1> Hello! I am yellow box. </h1>
</div>
<div id = "id1" onclick = "fun1()" style="background-color: red;
position: absolute;
width: 250px;
height: 100px;
border: 1px solid black;">
<h1> Hello! I am red box. </h1>
</div>
</body>
</html>An output of the above code is:
Once we click on the “red box”, the output is:
Once we click on the “yellow box”, the output is:
As in the above program, the two boxes are created. And later each box z-index value will be set up once we click on the respective box, as we can see in the above output. Once we click the box the z-index value of the respective box set by using this document.getElementById(“myDIV”).style.zIndex = “-1”;” code.
Conclusion
The jQuery zIndex() function is a built-in function in jQuery, but now it is deprecated and removed. The jQuery zIndex() function is used to sets or gets the z-index for an element.
Recommended Articles
This is a guide to jQuery zindex. Here we also discuss the Description and Working of the jQuery zindex() Function along with different examples and its code implementation. You may also have a look at the following articles to learn more –
