z-index

优质

小牛编辑

125浏览

2023-12-01

描述 (Description)

z-index设置元素的堆叠级别。

可能的值 (Possible Values)

auto - 元素的堆栈级别与其父元素的堆栈级别相同。
integer - 元素的堆栈级别设置为给定值，并为任何后代元素建立新的堆栈上下文。

适用于 (Applies to)

所有定位的元素。

DOM语法 (DOM Syntax)

object.style.zindex = "1";

例子 (Example)

以下是显示如何在CSS中创建图层的示例。

<html>
   <head>
   </head>
   <body>
      <div style = "background-color:red;
         width:300px;
         height:100px;
         position:relative;
         top:10px;
         left:80px;
         z-index:2">
      </div>
      <div style = "background-color:yellow;
         width:300px;
         height:100px;
         position:relative;
         top:-60px;
         left:35px;
         z-index:1;">
      </div>
      <div style = "background-color:green;
         width:300px;
         height:100px;
         position:relative;
         top:-220px;
         left:120px;
         z-index:3;">
      </div>
   </body>
</html>

这将产生以下结果 -