z-index 使用详解及注意

kevin-ying · 发表于 2015-9-5 17:47:57

从早期使用 layer 布局，到现在使用 Div 布局， Z-index 是一个很好的调节元素呈现顺序的属性。Z-index 值越高的元素现在更上面，实际上就是 Z-index 值越高，在 Z 轴坐标上显示在越上面。我们可以理解，屏幕为Z 轴的 0 值平面，远离浏览者的层 Z-index 值越低，离浏览者越近的层Z-index 值越高。

下面参考前端印象的一篇文章说明：

1、CSS样式表中Z-index属性的一些特征：

Z-index属性的默认值是0
元素可拥有负的 z-index 属性值，如z-index:-1
Z-index属性无继承性
Z-index属性JavaScript 使用语法：object.style.zIndex=”1″
几乎所有主流浏览器都支持 Z-index 属性

kevin-ying · 发表于 2015-9-5 17:49:14

2、CSS样式表中Z-index属性的使用方法：

[CSS] 纯文本查看 复制代码

.box
 {position:absolute;
left:0px;
top:0px;
z-index:-1}

3、CSS样式表中Z-index属性使用的注意事项：

（1）Z-index仅对定位元素有效（如position:relative\absolute\fixed\float）；

（2）Z-index只可比较同级元素。这也许是大家很容易忽视的问题，我就卡在了这里。也就是说，Z-index只能对同级元素进行分层展示；

（3）Z-index的作用域：假设A和B两个元素都设置了定位（相对定位、绝对定位、一个相对一个绝对定位都可以），且是同级元素（这里实际上重申了第一、二点）。样式为：

[CSS] 纯文本查看 复制代码

.boxA{z-index:4}
.boxB{z-index:5}

于是，不难看出，元素A的层级（z-index:4）要低于元素B（z-index:5），在此需要指出的是，A元素下面的子元素的层级也同样都低于B元素里的子元素，即使你将A元素里的子元素设为z-index:9999；同理元素B里的子元素，即使是设的z-index:1它照样比元素A的层级要高；

（4）这个属性不会作用于窗口控件，如select对象。

（5）在父元素的子元素中设置Z-index的值，可以改变子元素之间的层叠关系

（6）子元素的Z-index值不管是高于父元素还是低于父元素，只要他们的z-index值是大于等于0的数，他们都会显示在父元素之上，即压在父元素上；只要他们的值是小于0的数，则显示在父元素之下！

kevin-ying · 发表于 2015-9-5 17:50:08

z-index 详细解析

不设置z-index

如果没有元素设置z-index,元素对方会按照文档中出现的顺序从底到高排列：（排列顺序）
1.根元素
2.正常的流的元素
3.设置了position的元素，按在文档中的顺序排列
注：标准的块元素（DIV #5）没有设置任何定位，他将在定位元素之前渲染，出现在定位元素的下面，即使在html文档中处于后面。
示例见下图（注意元素的前后关系）：

[HTML] 纯文本查看 复制代码

<!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 {
font: 12px Arial;
}

span.bold { font-weight: bold; }

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

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

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

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

#absdiv2 {
opacity: 0.7;
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;
</div>

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

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

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

<div id="normdiv">
<br /><span class="bold">DIV #5</span>
<br />no positioning
</div>

</body></html>

kevin-ying · 发表于 2015-9-5 17:51:09

设置z-index属性
上面的例子解释了没有设置z-index是页面堆积的默认方式。如果想改变这种方式就为position元素设置z-index属性。这个属性值是整型（正数，负数），代表元素的z坐标。
1.z-index属性只对设置了position属性的元素起作用。
2.没有设置z-index的元素默认显示在0层。
3.设置了相同z-index的元素排列方式按照没有设置的情况堆放（见上）。测试结果如下

堆叠环境(Stacking context)
在上文中的讲解中可以看出div的渲染顺序是由他们的z-index影响的结果，这个特殊的属性使他们形成了堆叠环境。
在文档中的任何位置通过以下情况就可创建一个堆叠环境：
1.设置了position（absolutely或relatively）
2.元素设置了opacity（值小于1）
3.手机webkit和chrome 22+，position设置为fixed和z-index设置为auto也会形成堆叠环境
一个堆叠环境可以包含在另一个堆叠环境中，每个堆叠环境和他同级的堆叠环境相对独立互不影响，只影响它的子元素。
示例：

文档结构如下：
html

DIV #1
DIV #2
DIV #3
- DIV #4
- DIV #5
- DIV #6

需要注意的是div#4 div#5 div#6是div#3的子元素，因此这三个元素的堆叠基于div#3。即使z-index设置为6也不会高于div#1，设置为1也不会低于div#2。实际的渲染顺序如下：

Root

DIV #2 – z-index is 2
DIV #3 – z-index is 4
- DIV #5 – z-index 是 1, 渲染顺序4.1
- DIV #6 – z-index is 3, 渲染顺序 4.3
- DIV #4 – z-index is 6, 渲染顺序 4.6
DIV #1 – z-index is 5

[HTML] 纯文本查看 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
 
    <title>Understanding CSS z-index: The Stacking Context: Example Source</title>
 
    <style type="text/css">
      * {
        margin: 0;
        }
      html {
        padding: 20px;
        font: 12px/20px Arial, sans-serif;
        }
      div {
        opacity: 0.7;
        position: relative;
        }
      h1 {
        font: inherit;
        font-weight: bold;
        }
      #div1, #div2 {
        border: 1px dashed #696;
        padding: 10px;
        background-color: #cfc;
        }
      #div1 {
        z-index: 5;
        margin-bottom: 190px;
        }
      #div2 {
        z-index: 2;
        }
      #div3 {
        z-index: 4;
        opacity: 1;
        position: absolute;
        top: 40px;
        left: 180px;
        width: 330px;
        border: 1px dashed #900;
        background-color: #fdd;
        padding: 40px 20px 20px;
        }
      #div4, #div5 {
        border: 1px dashed #996;
        background-color: #ffc;
        }
      #div4 {
        z-index: 6;
        margin-bottom: 15px;
        padding: 25px 10px 5px;
        }
      #div5 {
        z-index: 1;
        margin-top: 15px;
        padding: 5px 10px;
        }
      #div6 {
        z-index: 3;
        position: absolute;
        top: 20px;
        left: 180px;
        width: 150px;
        height: 125px;
        border: 1px dashed #009;
        padding-top: 125px;
        background-color: #ddf;
        text-align: center;
        }
    </style>
  </head>
  <body>
 
    <div id="div1">
      <h1>Division Element #1</h1>
      <code>position: relative;<br/>
      z-index: 5;</code>
    </div>
 
    <div id="div2">
      <h1>Division Element #2</h1>
      <code>position: relative;<br/>
      z-index: 2;</code>
    </div>
    <div id="div3">
      <div id="div4">
        <h1>Division Element #4</h1>
        <code>position: relative;<br/>
        z-index: 6;</code>
      </div>
      <h1>Division Element #3</h1>
      <code>position: absolute;<br/>
      z-index: 4;</code>
 
      <div id="div5">
        <h1>Division Element #5</h1>
        <code>position: relative;<br/>
        z-index: 1;</code>
      </div>
      <div id="div6">
        <h1>Division Element #6</h1>
        <code>position: absolute;<br/>
        z-index: 3;</code>
      </div>
    </div>
  </body>
</html>

		自动登录	找回密码
密码			免费注册

[WEB前端] z-index 使用详解及注意

本帖子中包含更多资源

相关帖子

本帖子中包含更多资源

本帖子中包含更多资源