CSS样式表中z-index使用方法总结

本文章来给各位同学介绍CSS样式表中z-index使用方法,有需要了解的同学可详细参考参考。

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.

Z-index是什么意思?在CSS2.0中,Z-index 属性用来设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(Z轴)。

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

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

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

代码如下 复制代码

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

前台效果:

css样式表中z-index属性的使用
3、CSS样式表中Z-index属性使用的注意事项:
(1)Z-index仅对定位元素有效(如position:relative);
(2)Z-index只可比较同级元素。这也许是大家很容易忽视的问题,我就卡在了这里。也就是说,Z-index只能对同级元素进行分层展示;
(3)Z-index的作用域:假设A和B两个元素都设置了定位(相对定位、绝对定位、一个相对一个绝对定位都可以),且是同级元素,样式为

.boxA{z-index:4}
.boxB{z-index:5}
于是,不难看出,元素B的层级要高于元素A,在此需要指出的是,A元素下面的子元素的层级也同样都低于B元素里的子元素,即使你将A元素里的子元素设为z-index:9999;同理元素B里的子元素,即使是设的z-index:1它照样比元素A的层级要高;
(4)这个属性不会作用于窗口控件,如select对象。

以上关于Z-Index的总结都是个人通过解决实践过程中遇到的问题而得出,希望能给遇到CSS样式表中Z-Index问题的朋友有所指引。

关于 z-index, 目前遇到的一些问题

1.某些浏览器下元素层级遮盖存在 bug.
2.某个元素 z-index 设的太大, 导致始终无法被遮盖.
3.JavaScript 动态计算 z-index, 导致元素覆盖关系部可控.
层级遮盖 bug 出现的原因
1.IE6/7 对 z-index 的表现跟 IE8 及以上浏览器不一致.
2.position 值为非 static 时, 如果不设置 z-index 属性, IE6/7 下 z-index 默认为 0, 而 IE8 及以上浏览器 z-index 为 auto, 且 zindex:auto 的元素不参与堆叠优先级比较.

z-index IE6/7 IE8/9 Firefox/Chrome
不设置 0 auto auto
number number number number

层级关系的比较

先看几点结论:

1.对于同级元素, 默认 (或 position:static) 情况下文档流后面的元素会覆盖前面的.
2.对于同级元素, position 不为 static 且 z-index 存在的情况下 z-index 大的元素会覆盖 z-index 小的元素, 即 z-index 越大优先级越高.
3.IE6/7 下 position 不为 static, 且 z-index 不存在时 z-index 为 0, 除此之外的浏览器 z-index 为 auto.
4.z-index 为 auto 的元素不参与层级关系的比较, 由向上遍历至此且 z-index 不为 auto 的元素来参与比较.
在上面 2 点结论的基础上, 我们引入定位树(非 W3C 官方词汇) 的概念来做层级的比较. 在定位树这个概念下, 浏览器在渲染 DOM 节点时, 除了生成 DOM 树之外, 还会根据 DOM 树中的定位元素 (position 不为 static) 生成定位树.

DOM 树 (左上), 定位树 (右下) 对比如下图 (其中边上有红色圆圈的表示该元素 position 不为 static).

可以这样理解:定位树中包含了 DOM 树中 position 不为 staitc 的全部元素. 而非同级元素比较层级关系可以比较如下.

•向上遍历定位树的父节点直到 2 个元素为同级元素.
•根据上面的结论来最最后的比较, 层级高的元素会越靠近用户的显示器并能覆盖层级低的元素

代码如下 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#king_of_diamonds {
position: relative;
background-color:gray;
width:30px; height:30px;
left: 145px;
top: 145px;
}
#ace_of_diamonds {
position:relative;
background-color:blue;
width:300px; height:300px;
left: 160px;
top: 130px;
z-index: 1;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<div id="king_of_diamonds">
a
</div>
<div id="ace_of_diamonds">
b
</div>
</form>
</body>
</html>

分类:默认分类 时间:2015-03-11 人气:3
本文关键词:
分享到:

相关文章

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.087 (s). 10 q(s)