CSS zindex 层级关系优先级的概念.docx

B

CSSz-index属性互相覆盖的例子

上面互相覆盖在什么时候用到这样的实现?

看起来偏门,其实很常用,比如说,电子商务网站侧栏的类目展示列表就可以用这个技巧来实现.

下图是某网站的类目展示区域,二级类目的悬浮层覆盖一级类目列表外框,而一级类目的节点覆盖二级类目的悬浮层.如果使用CSS实现展示效果,一级类目的外框相当于上面例子中的A,一级类目的节点相当于A-1,二级类目的悬浮层相当于B.

电子商务网站侧栏的类目展示列表

参与规则

我们尝试不用position属性,但为节点加上z-index属性.发现z-index对节点没起作用.

复制代码

代码如下:

2;">A

1;">B

0;">C

CSSz-index属性参与规则的例子,没有明确定位的时候

W3C对z-index属性的描述中提到在z-index属性仅在节点的position属性为relative,absolute或者fixed时生效.

Thez-indexpropertyspecifiesthestackorderofanelement.Onlyworksonpositionedelements（position:

absolute;,position:

relative;orposition:

fixed;）.

复制代码

代码如下:

2;">A

relative;z-index:

1;">B

relative;z-index:

0;">C

CSSz-index属性参与规则的例子,明确定位的节点才能使用z-index属性

默认值规则

如果所有节点都定义了position:

relative.z-index为0的节点与没有定义z-index在同一层级内没有高低之分;但z-index大于等于1的节点会遮盖没有定义z-index的节点;z-index的值为负数的节点将被没有定义z-index的节点覆盖.

复制代码

代码如下:

relative;z-index:

1;">A

relative;z-index:

0;">B

relative;">C

relative;z-index:

0;">D

CSSz-index属性默认值规则的例子

通过检查我们还发现,当position设为relative,absolute或者fixed,而没有设置z-index时,IE8以上和W3C浏览器（下文我们统称为W3C浏览器）的z-index默认值是auto,但IE6和IE7是0.

从父规则

如果A,B节点都定义了position:

relative,A节点的z-index比B节点大,那么A的子节点必定覆盖在B的子节点前面.

复制代码

代码如下:

relative;z-index:

1;">

A-1

relative;z-index:

0;">

B-1

CSSz-index属性从父规则的例子,子节点不设定层级

如果所有节点都定义了position:

relative,A节点的z-index和B节点一样大,但因为顺序规则,B节点覆盖在A节点前面.就算A的子节点z-index值比B的子节点大,B的子节点还是会覆盖在A的子节点前面.

复制代码

代码如下:

relative;z-index:

0;">

relative;z-index:

2;">A-1

relative;z-index:

0;">

relative;z-index:

1;">B-1

CSSz-index属性从父规则的例子,不可逾越的层级

很多人将z-index设得很大,9999什么的都出来了,如果不考虑父节点的影响,设得再大也没用,那是无法逾越的层级.

层级树规则

可能你会觉得在DOM结构中的兄弟节点会拎出来进行比较并确定层级,其实不然.

复制代码

代码如下:

relative;z-index:

2;">

relative;z-index:

0;">A-1

relative;z-index:

1;">B-1

CSSz-index属性层级树规则的例子

我们认为同时将position设为relative,absolute或者fixed,并且z-index经过整数赋值的节点,会被放置到一个与DOM不一样的层级树里面,并且在层级树中通过对比z-index决定显示的层级.上面的例子如果用层级树来表示的话,应该如下图所示.

CSSz-index的层级树

图中虽然A-1（z-index:

0）的值比B-1（z-index:

1）小,但因为在层级树里A（z-index:

2）和B-1在一个层级,而A的值比B-1大,根据从父规则,A-1显示在B-1前面.

参与规则2

前面提到的参与规则认为只要节点的position属性为relative,absolute或者fixed,即可参与层级比较,其实不准确.如果所有节点都定义了position:

relative,并且将z-index设为整数值,根据从父规则,父节点的层级决定了子节点所在层级.

复制代码

代码如下:

relative;z-index:

0;">

relative;z-index:

100;">A-1

relative;z-index:

0;">

relative;z-index:

10;">B-1-1

relative;z-index:

0;">

relative;z-index:

1;">C-1-1-1

例子中A,B-1,C-1-1作为父节点,z-index的值相同,根据顺序规则,C-1-1在B-1之前,B-1在A之前;又根据从父规则,无论子节点的z-index值是什么,C-1-1-1在B-1-1之前,B-1-1在A-1之前.

CSSz-index属性参与规则2的例子,所有节点参与层级比较

如果我们将所有父节点的z-index属性去除,诡异的事情发生了.IE6和IE7浏览器显示效果不变,而W3C浏览器的子节点不再从父,而是根据自身的z-index确定层级.

复制代码

代码如下:

relative;">

relative;z-index:

100;">A-1

relative;">

relative;z-index:

10;">B-1-1

relative;">

relative;z-index:

1;">C-1-1-1

根据默认值规则,IE6/IE7和W3C浏览器上的元素存在z-index默认值的区别.我们相信,仅当position设为relative,absolute或者fixed,并且z-index赋整数值时,节点被放置到层级树;而z-index为默认值时,只在document兄弟节点间比较层级.在W3C浏览器中,A,B-1和C-1-1的z-index均为auto,不参与层级比较.

CSSz-index属性参与规则2的例子,z-index为auto的节点不参与层级比较

而在IE6和IE7中,因为z-index的默认值是0,所以也参与了层级比较.

CSSz-index属性参与规则2的例子,IE6和IE7中z-index默认为0

设置了position而没有z-index的节点虽然不参与层级树的比较,但还会在DOM中与兄弟节点进行层级比较.

复制代码

代码如下:

relative;">

relative;z-index:

100;">A-1

relative;z-index:

10;">B-1-1

relative;">

relative;z-index:

1;">C-1-1-1

我们对上个例子改造一下,将B-1的position属性删除后,W3C浏览器显示如下图.根据定位规则,A和C-1-1会显示在B-1的前面;而根据顺序规则,C-1-1又显示在A前面.

CSSz-index属性参与规则2的例子,position为auto的节点不参与层级树比较,但仍参与DOM兄弟节点间的层级比较,W3C浏览器

在IE6和IE7中,因为A和C-1-1设置了position:

relative,而且z-index的默认值为0,所以也参与层级树比较,所以有如下效果.

CSSz-index属性参与规则2的例子,position为auto的节点不参与层级树比较,但仍参与DOM兄弟节点间的层级比较,IE6和IE7

总结

浏览器节点显示层级是一个费力的活,今天你觉得A区块会永远置顶,但明天因为需求变动,突然出现B元素需要置顶.一层一层往上堆砌,某天回头一看,发现很多区块交错在一起,而且他们的值一个比一个大,根本搞不清头绪.我觉得在操刀干活之前,最好先将position,z-index和层级的关系搞搞清楚,以免后患无穷.

另外,非情非得已,切勿用JavaScript计算z-index,并将某个节点的z-index设置成所有节点中层级最高.

因为篇幅太长,本文仅从节点属性角度进行讨论,没有涉及select和iframe等特殊页面节点考虑,如果有机会下次再为大家分享.

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

CSS zindex 层级关系优先级的概念 层级 关系 优先级 概念

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。