源于生活

标题: z-index 使用详解及注意 [打印本页]
作者: kevin-ying    时间: 2015-9-5 17:47
标题: z-index 使用详解及注意
从早期使用 layer 布局，到现在使用 Div 布局， Z-index 是一个很好的调节元素呈现顺序的属性。Z-index 值越高的元素现在更上面，实际上就是 Z-index 值越高，在 Z  轴坐标上显示在越上面。我们可以理解，屏幕为Z 轴的 0 值平面，远离浏览者的层 Z-index 值越低，离浏览者越近的层Z-index 值越高。
[attach]1142[/attach]
下面参考前端印象的一篇文章说明：
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
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
z-index 详细解析
不设置z-index
如果没有元素设置z-index,元素对方会按照文档中出现的顺序从底到高排列：（排列顺序）
1.根元素
2.正常的流的元素
3.设置了position的元素，按在文档中的顺序排列
注：标准的块元素（DIV #5）没有设置任何定位，他将在定位元素之前渲染，出现在定位元素的下面，即使在html文档中处于后面。
示例见下图（注意元素的前后关系）：
[attach]1143[/attach]

[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
设置z-index属性
上面的例子解释了没有设置z-index是页面堆积的默认方式。如果想改变这种方式就为position元素设置z-index属性。这个属性值是整型（正数，负数），代表元素的z坐标。
1.z-index属性只对设置了position属性的元素起作用。
2.没有设置z-index的元素默认显示在0层。
3.设置了相同z-index的元素排列方式按照没有设置的情况堆放（见上）。测试结果如下
[attach]1144[/attach]
堆叠环境(Stacking context)
在上文中的讲解中可以看出div的渲染顺序是由他们的z-index影响的结果，这个特殊的属性使他们形成了堆叠环境。
在文档中的任何位置通过以下情况就可创建一个堆叠环境：
1.设置了position（absolutely或relatively）
2.元素设置了opacity（值小于1）
3.手机webkit和chrome 22+，position设置为fixed和z-index设置为auto也会形成堆叠环境
一个堆叠环境可以包含在另一个堆叠环境中，每个堆叠环境和他同级的堆叠环境相对独立互不影响，只影响它的子元素。
示例：
[attach]1145[/attach]
文档结构如下：
html


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

[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>





欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1