设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
搜索
热搜: 活动 交友 discuz
查看: 2373|回复: 3
打印 上一主题 下一主题

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

[复制链接]
跳转到指定楼层
楼主
发表于 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 属性

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?免费注册

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖
回复

使用道具 举报

沙发
 楼主| 发表于 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的数,则显示在父元素之下!

回复 支持 反对

使用道具 举报

板凳
 楼主| 发表于 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>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?免费注册

x
回复 支持 反对

使用道具 举报

地板
 楼主| 发表于 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>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?免费注册

x
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-11-27 11:32 , Processed in 0.093601 second(s), 29 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表