Trending October 2023 # Working Of The Jquery Zindex() Function With Examples # Suggested November 2023 # Top 11 Popular

You are reading the article Working Of The Jquery Zindex() Function With Examples updated in October 2023 on the website Dacquyenphaidep.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 Working Of The Jquery Zindex() Function With Examples

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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:

$(document).ready(function() { alert(“The first div z-index value is “+$(‘#id1’).css(‘z-index’)); }); alert(“The second div z-index value is “+$(‘#id2’).css(‘z-index’)); }); alert(“The third div z-index value is “+$(‘#id3’).css(‘z-index’)); }); }); <div id = “id1”; style = “background-color:red; width :300px; height :100px; top :10px; left :80px; position :relative; <div id = “id3”; style = “background-color:yellow; width :300px; height :100px; top :-60px; left :35px; position :relative; <div id = “id2”; style = “background-color:green; width :300px; height :100px; top :-220px; left :120px; position :relative;

An output of the above code is:

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

function fun1() { document.getElementById(“id1”).style.zIndex = “-1”; } function fun2() { document.getElementById(“id2”).style.zIndex = “-1”; }

An output of the above code is:

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.