How to set the stack order of a positioned element in JavaScript?

In this tutorial, we shall learn to set the stack order of a positioned element in JavaScript. To set the stack order, we can use the style zIndex property.

Let's first check what the stack order is. The stack order says the order in which the DOM elements are displayed. This is the element's position on the z-axis.

Now, what is a positioned element? A positioned element has relative, absolute, fixed, or static positions.

Why do we need to go for the stack order? Elements might overlap and look clumsy when positioned; therefore, we go for the stack order to arrange them better. We can use the stack order on banners, dialogs, tooltips, etc.

Let us get deeper into the concept and understand how to achieve this.

Using the Style zIndex Property

In JavaScript, with the Style zIndex property, we can set or return the stack order of a positioned element. An element with the highest stack order is displayed in front of other elements with the lowest stack order.

If the overlapping elements have the same zIndex, the HTML order will come into effect. The last element appears on top in such cases.

The index value is limited from -2147483648 to +2147483647.

Negative zIndex values are handy in complex UI elements. We can position elements behind their parent elements with negative values.

The pseudo selectors such as 'before' and 'after' use negative zIndex values. The 4th generation browsers might not support a negative zIndex.

A few browsers do not follow the z-index in the case of iframe tags. Inline frames will float on other elements without considering the zIndex. The same happens to windowed elements like dropdowns.

The 4th generation browsers will display all form control elements on top of other positioned elements regardless of the stack order.

Users can follow the syntax below for using this property.

Syntax

Following is the syntax to set the stack order of a positioned element using the Style zIndex property in JavaScript −

object.style.zIndex = value;

This syntax allows us to set the required zIndex to the element's style. The available values are explained below.

Parameters

  • auto − The browser sets the stack order of the element based on its order in the document.

  • number − An integer that sets the stack order of the element. Negative values are accepted.

  • initial − Sets this property to its default value.

  • inherit − Inherits this property from its parent element.

The default value of the object is auto. The return value is a string representing the stack order of a positioned element.

Example 1

You can try to run the following code to implement the zIndex property in JavaScript −

<!DOCTYPE html>
<html>
<head>
   <style>
      #myID {
         position: absolute;
         left: 20px;
         top: 20px;
         z-index: -1
      }
   </style>
</head>
<body>
   <h3> Setting the stack order of positioned elements using the<i> zIndex </i>property.
   </h3>
   <img id = "myID" src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" width = "500" height = "400">
   <button type="button" onclick="myFunction()">Set Stack Order</button>
   <p>Z-index is -1</p>
   <script>
      function myFunction() {
         document.getElementById("myID").style.zIndex = "1";
      }
   </script>
</body>
</html>

Example 2

This program lets the user reverse the stack order of multiple div elements.

The initial order of color boxes is green-yellow-red-blue. When the user press the button, we call the function to set the zIndex following the syntax above.

We change the order to blue-red-yellow-green by setting zIndex 2,1,0,-1, respectively. Hence blue block appears first and the remaining blocks beneath it.

<html>
<head>
   <style>
      .zIndxEl{
         position: absolute;
         width: 100px;
         height: 50px;
      }
      #zIndxEl1{
         background-color: blue;
         top: 40px;
         left: 40px;
      }
      #zIndxEl2{
         background-color: red;
         top: 30 px;
         left: 30 px;
      }
      #zIndxEl3{
         background-color: yellow;
         top: 20px;
         left: 20px;
      }
      #zIndxEl4{
         background-color: green;
         top: 10px;
         left: 10px;
      }
      #zIndxWrap{
         position: relative;
      }
      #zIndxBtnWrap{
         margin-top: 70px;
         float: left;
      }
   </style>
</head>
<body>
   <h3> Setting the stack order of positioned elements using <i> the zIndex property. </i></h3>
   <div id = "zIndxWrap">
      <div class = "zIndxEl" id = "zIndxEl1"></div>
      <div class = "zIndxEl" id = "zIndxEl2"></div>
      <div class = "zIndxEl" id = "zIndxEl3"></div>
      <div class = "zIndxEl" id = "zIndxEl4"></div>
   </div>
   <br>
   <div id = "zIndxBtnWrap">
      <p> Click on the button to reverse the color blocks with zIndex. </p>
      <button onclick = "setZIndex();"> Reverse </button>
   </div>
   <br>
</body>
   <script>
      function setZIndex(){
         var zIndxBtnWrap = document.getElementById("zIndxBtnWrap");
         zIndxBtnWrap.style.display = "none";
         var zIndxEl1 = document.getElementById("zIndxEl1");
         var zIndxEl2 = document.getElementById("zIndxEl2");
         var zIndxEl3 = document.getElementById("zIndxEl3");
         var zIndxEl4 = document.getElementById("zIndxEl4");
         zIndxEl1.style.zIndex = "2";
         zIndxEl2.style.zIndex = "1";
         zIndxEl3.style.zIndex = "0";
         zIndxEl4.style.zIndex = "-1";
      }
   </script>
</html>

In this tutorial, we went through the zIndex property in JavaScript. To set the stack order of a positioned element, this property is a built-in option in JavaScript.

Even though its implementation is a little complicated, it is useful on many websites.

Updated on: 12-Oct-2022

243 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements