We sometimes need to change or animate the z-index of Div layer with jQuery. The main reason may be to move a Div layer behind other Div layer. Changing the z-index of a Div layer is rather simple. The final result is shown as below:

Let’s take a look at the z-index values of the two Div layers:

Z-index of the two Div layers:

  • #pageContent – 10
  • #picture – 20

As we know, a Div layer with higher z-index on top a Div layer with lower z-index. That’s why we can move a Div layer on top or below another Div layer by changing the z-index.

Here’s the jQuery codes of the above example:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Animate Div Layer Z-index</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
                                 
        // Get the outer height of #picture Div
        var widthShift = $("#picture").outerWidth();
                 
        $(".slideRight").click(function() {
                                    
            if ( $(this).is(".slideRight") ) {
                
                // Move the curtain Div layer behind the picture Div layer
                    //  by changing the z-index smaller than picture.

                $("#picture").css( 'z-index', 5 );
                
                // Toggle the class
                $(this).toggleClass("slideRight slideLeft")
                
            } else {
                
                // Move the curtain Div layer above the picture Div layer
                    //  by changing the z-index back to 20 (greater than picture).
                $("#picture").css( 'z-index', 20 );
                
                // Toggle the class
                $(this).toggleClass("slideRight slideLeft")
            }
            
        });                         
         
    });
</script>
</head>

<body>

<h1>jQuery Animate Div Layer Z-index</h1>

<div id="frame">
<div id="pageContent"></div>
    <div id="picture"></div>
</div>

<div style="width:282px; text-align: center; margin-bottom:10px;">
    <input type="button" value="Move Curtain to Back/Front" />
</div>

<div style="width:282px; text-align: center"></div>
</body>
</html>

Once we know how to change the z-index of Div layers, interesting animation can be made.