Stacking Elements

The z-index attribute determines which element is in front and which are covered by the front element
The JavaScript property associated with the z-index attribute is zIndex
z-index can be changed dynamically (by changing zIndex)
An image element can have an onclick attribute, so images can be clicked to trigger event handlers
Anchors can also trigger event handlers when they are clicked
- The href attribute can be set to call a JavaScript function by assigning it the call, with 'JAVASCRIPT' attached to the call code
```
<a href = "JAVASCRIPT:fun()">
```
To change stacking order, the handler function must change the zIndex property value of the element
A call to the function from an element sets the zIndex value of the new top element to 10 and the zIndex value of the old top element to 0
- It also sets the current top to the new top

<!DOCTYPE html>
<!-- stacking.html
     Uses stacking.js
     Illustrates dynamic stacking of images
     -->
<html lang = "en">
  <head>
    <title> Dynamic stacking of images </title>
    <meta charset = "utf-8" />
    <script type = "text/javascript"  src = "stacking.js" >
    </script>
    <style type = "text/css">
      .plane1 {position: absolute; top: 0; left: 0; 
               z-index: 0;}
      .plane2 {position: absolute; top: 50px; left: 110px; 
               z-index: 0;}
      .plane3 {position: absolute; top: 100px; left: 220px; 
               z-index: 0;}
    </style>
  </head>
  <body>
    <p>
      <img class = "plane1"  id = "airplane1"
           src = "airplane1.jpg" 
           alt = "(Picture of an airplane)" 
           onclick = "toTop('airplane1')" />
      <img class = "plane2"  id = "airplane2"
           src = "airplane2.jpg"
           alt = "(Picture of an airplane)"
           onclick = "toTop('airplane2')" />
      <img class = "plane3"  id = "airplane3"
           src = "airplane3.jpg"
           alt = "(Picture of an airplane)"
           onclick = "toTop('airplane3')" />
    </p>
  </body>
</html>

// stacking.js
//   Illustrates dynamic stacking of images

var topp = "airplane3";

// The event handler function to move the given element
//  to the top of the display stack

function toTop(newTop) {

// Set the two dom addresses, one for the old top 
//  element and one for the new top element 
  var domTop = document.getElementById(topp).style;
  var domNew = document.getElementById(newTop).style;

// Set the zIndex properties of the two elements, and
//  reset top to the new top
  domTop.zIndex = "0";
  domNew.zIndex = "10";
  topp = newTop;
}