z-index属性

逃离我推掉我的手 2022-06-07 06:21 145阅读 0赞

## 浏览器支持 ##

所有主流浏览器都支持 z-index 属性。

**注释：**任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

## 定义和用法 ##

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

**注释：**元素可拥有负的 z-index 属性值。

**注释：**Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

### 说明 ###

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

<table style="margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255); width:181px"> 默认值：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top; width:584px"> auto</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 继承性：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> no</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 版本：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> CSS2</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> JavaScript 语法：</th> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">object</span>.style.zIndex="1"</td> 
  </tr> 
 </tbody> 
</table>

## 可能的值 ##

<table style="margin:15px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:809px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 值</th> 
   <th style="margin:0px; padding:5px 15px 5px 6px; border:1px solid rgb(63,63,63); vertical-align:baseline; background-color:rgb(63,63,63); text-align:left; color:rgb(255,255,255)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> auto</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 默认。堆叠顺序与父元素相等。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> <span style="margin:0px; padding:0px; border:0px">number</span></td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 设置元素的堆叠顺序。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(255,255,255)"> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> inherit</td> 
   <td style="margin:0px; padding:6px 15px 6px 6px; border:1px solid rgb(170,170,170); vertical-align:text-top"> 规定应该从父元素继承 z-index 属性的值。</td> 
  </tr> 
 </tbody> 
</table>