HTML | DOM 样式 zIndex 属性

Style zIndex属性用于设置或返回定位元素的堆栈顺序。具有较低堆栈顺序的元素将在另一个具有较高堆栈顺序的元素之后。
例如，具有堆栈顺序(1) 的元素将位于具有堆栈顺序(0) 的元素之前。
当用户想要创建重叠元素时，通常会使用 Style zIndex 属性。

句法 ：

• 获取属性：

  object.style.zIndex;

• 要设置属性：

  object.style.zIndex = "auto|number|initial|inherit"

属性值：

• auto：用于让浏览器决定元素的堆栈顺序。
• number：它使用一个整数来定义元素的堆栈顺序。
• initial：用于设置默认值。
• 继承：用于从其父级继承属性。

下面的程序说明了 Style zIndex 属性：
示例：更改 元素的堆栈顺序。

  

    Style zIndex Property
    
        #MyImage {
            position: absolute;
            left: 200px;
            top: 80px;
            z-index: -1
        }
          
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    

  


    GeeksforGeeks
    Style zIndex Property
  
    
  
    
      Bring Logo In The Front
    
  
    This is the logo of Geeksforgeeks.It has z-index as 0.
    
    To bring the logo in the front,
    double-click the "Bring Logo In The Front" button.
  
    
        function stack() {
            document.getElementById("MyImage").style.zIndex = "1";
        }
    


  

输出：

• 点击按钮前：
  
• 双击按钮后：
  

支持的浏览器： HTML支持的浏览器 |下面列出了DOM 样式 zIndex 属性：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果Safari