CSS z-index 属性

设置图像的 z-index：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    img {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
    }
  </style>
</head>

<body>
  <h1>This is a heading</h1>
  <img src="/examples/paper.gif" width="100" height="140" />
  <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>

尝试一下 »

属性定义及使用说明

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

默认值： auto
继承： no
版本： CSS2
JavaScript 语法： object.style.zIndex="1"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
z-index 1.0 4.0 3.0 1.0 4.0

属性值

值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

相关文章

CSS 教程: CSS 定位