--- title: Adding z-index slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index original_slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index ---

« CSS «理解z-index

使用 {{ cssxref("z-index") }}

在第一个例子 Stacking without z-index中，我们描述了默认的摆放顺序。当你需要指定不同的排列顺序时，只要给元素指定一个z-index的数值就可以了。

该属性必须是整数(正负均可)，它体现了元素在z轴的位置。如果你对z轴体系不了解，你也可以把它理解成“层叠”，每个层都有一个顺序数，顺序数大的层在上面，小的在下面。

注意！z-index只对指定了 positioned属性的元素有效。

底层: 距离观察者最远
...
-3 层
-2 层
-1 层
0 层 默认层
1 层
2 层
3 层
...
顶部: 最接近观察者

注释:

当没有指定z-index的时候，所有元素都在会被渲染在默认层(0层)
当多个元素的z-index属性相同的时候(在同一个层里面)，那么将按照 Stacking without z-index 中描述的规则进行布局。

在下一个例子中，所有的层都是用z-index进行排序的。元素div#5 的z-index无效，因为他没有被指定position属性。

Example of stacking rules modified using z-index

Example source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/css">

div {
   opacity: 0.7;
   font: 12px Arial;
}

span.bold { font-weight: bold; }

#normdiv {
   z-index: 8;
   height: 70px;
   border: 1px dashed #999966;
   background-color: #ffffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv1 {
   z-index: 3;
   height: 100px;
   position: relative;
   top: 30px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv2 {
   z-index: 2;
   height: 100px;
   position: relative;
   top: 15px;
   left: 20px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#absdiv1 {
   z-index: 5;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   left: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

#absdiv2 {
   z-index: 1;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   right: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

</style></head>

<body>

<br /><br />

<div id="absdiv1">
   <br /><span class="bold">DIV #1</span>
   <br />position: absolute;
   <br />z-index: 5;
</div>

<div id="reldiv1">
   <br /><span class="bold">DIV #2</span>
   <br />position: relative;
   <br />z-index: 3;
</div>

<div id="reldiv2">
   <br /><span class="bold">DIV #3</span>
   <br />position: relative;
   <br />z-index: 2;
</div>

<div id="absdiv2">
   <br /><span class="bold">DIV #4</span>
   <br />position: absolute;
   <br />z-index: 1;
</div>

<div id="normdiv">
   <br /><span class="bold">DIV #5</span>
   <br />no positioning
   <br />z-index: 8;
</div>

</body></html>

Original Document Information

Author(s): Paolo Lombardi
This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
Last Updated Date: July 9th, 2005

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

使用 {{ cssxref("z-index") }}

Example source code

See also

Original Document Information