仓酷云

标题: DIV教程之CSS网页制造教程:z-index属性的利用办法和层级树 [打印本页]

作者: 爱飞 时间: 2015-1-15 22:49
标题: DIV教程之CSS网页制造教程:z-index属性的利用办法和层级树
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。
破洛洛文章简介：扫瞄器节点显现层级是一个吃力的活,明天你以为A区块会永久置顶,但今天由于需求变化,俄然呈现B元素必要置顶.一层一层往上堆砌,某天转头一看,发明良多区块交织在一同,并且他们的值一个比一个年夜,基本弄不清眉目.我以为在操刀干活之前,最好先将position,z-i
CSS中的z-index属性用于设置节点的堆叠按次,具有更高堆叠按次的节点将显现在堆叠按次较低的节点后面,这是我们对z-index属性广泛的熟悉.与此同时,我们老是对堆叠按次捉摸不透,将z-index的值设得很年夜也一定能将节点显现在最后面.本文将经由过程一些例子对z-index的利用办法举行剖析,而且为列位带进z-index层级树的观点.
这个礼拜我们团队做了一次外部的手艺分享,南瓜小米粥为我们分享了他对CSSz-index的了解和引进层级树这个观点.这个分享的现场效果很好,以是我也将z-index和层级树话题搬到博客来谈一谈.
本文谈及多个影响节点显现层级的划定规矩,个中用到的一切例子全体排列在《position属性和z-index属性对页面节点层级影响的例子》中.
按次划定规矩

假如不合错误节点设定position属性,位于文档流前面的节点会粉饰后面的节点.

复制代码

定位划定规矩

假如将position设为static,位于文档流前面的节点仍然会粉饰后面的节点浮动,以是position:static不会影响节点的粉饰干系.

复制代码

假如将position设为relative(绝对定位),absolute(相对定位)大概fixed(流动定位),如许的节点会掩盖没有设置position属性大概属性值为static的节点,申明前者比后者的默许层级高.

复制代码

在没有z-index属性搅扰的情形下,依据这按次划定规矩和定位划定规矩,我们能够做出加倍庞大的布局.这里我们对A和B都不设定position,但对A的子节点A-1设定position:relative.依据按次划定规矩,B会掩盖A,又依据定位划定规矩A会掩盖B.

A-1B

复制代码

下面相互掩盖在甚么时分用到如许的完成?看起来偏门,实在很经常使用,好比说,电子商务网站侧栏的类目展现列表就能够用这个技能来完成.
下图是某网站的类目展现地区,二级类目标悬浮层掩盖一级类目列表外框,而一级类目标节点掩盖二级类目标悬浮层.假如利用CSS完成展现效果,一级类目标外框相称于下面例子中的A,一级类目标节点相称于A-1,二级类目标悬浮层相称于B.

介入划定规矩

我们实验不必position属性,但为节点加上z-index属性.发明z-index对节点没起感化.

复制代码

W3C对z-index属性的形貌中提到在z-index属性仅在节点的position属性为relative,absolute大概fixed时失效.

Thez-indexpropertyspecifiesthestackorderofanelement.Onlyworksonpositionedelements(position:absolute;,position:relative;orposition:fixed;).

复制代码

默许值划定规矩

假如一切节点都界说了position:relative.z-index为0的节点与没有界说z-index在统一层级内没有上下之分;但z-index年夜于即是1的节点会粉饰没有界说z-index的节点;z-index的值为正数的节点将被没有界说z-index的节点掩盖.

ABCD

复制代码

经由过程反省我们还发明,当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的子节点后面.

A-1B-1

复制代码

假如一切节点都界说了position:relative,A节点的z-index和B节点一样年夜,但由于按次划定规矩,B节点掩盖在A节点后面.就算A的子节点z-index值比B的子节点年夜,B的子节点仍是会掩盖在A的子节点后面.

A-1B-1

复制代码

良多人将z-index设得很年夜,9999甚么的都出来了,假如不思索父节点的影响,设得再年夜也没用,那是没法超越的层级.
层级树划定规矩

大概你会以为在DOM布局中的兄弟节点会拎出来举行对照并断定层级,实在否则.

A-1B-1

复制代码

我们以为同时将position设为relative,absolute大概fixed,而且z-index经由整数赋值的节点,会被安排到一个与DOM纷歧样的层级树内里,而且在层级树中经由过程对照z-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设为整数值,依据从父划定规矩,父节点的层级决意了子节点地点层级.

复制代码

例子中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之前.

假如我们将一切父节点的z-index属性往除,诡异的事变产生了.IE6和IE7扫瞄器显现效果稳定,而W3C扫瞄器的子节点不再从父,而是依据本身的z-index断定层级.

复制代码

依据默许值划定规矩,IE6/IE7和W3C扫瞄器上的元素存在z-index默许值的区分.我们信任,仅当position设为relative,absolute大概fixed,而且z-index赋整数值时,节点被安排到层级树;而z-index为默许值时,只在document兄弟节点间对照层级.在W3C扫瞄器中,A,B-1和C-1-1的z-index均为auto,不介入层级对照.

而在IE6和IE7中,由于z-index的默许值是0,以是也介入了层级对照.

设置了position而没有z-index的节点固然不介入层级树的对照,但还会在DOM中与兄弟节点举行层级对照.

复制代码

我们对上个例子改革一下,将B-1的position属性删除后,W3C扫瞄器显现以下图.依据定位划定规矩,A和C-1-1会显现在B-1的后面;而依据按次划定规矩,C-1-1又显现在A后面.

在IE6和IE7中,由于A和C-1-1设置了position:relative,并且z-index的默许值为0,以是也介入层级树对照,以是有以下效果.

总结

扫瞄器节点显现层级是一个吃力的活,明天你以为A区块会永久置顶,但今天由于需求变化,俄然呈现B元素必要置顶.一层一层往上堆砌,某天转头一看,发明良多区块交织在一同,并且他们的值一个比一个年夜,基本弄不清眉目.我以为在操刀干活之前,最好先将position,z-index和层级的干系弄弄分明,以避免祸不单行.
别的,非情非得已,切勿用JavaScript盘算z-index,并将某个节点的z-index设置成一切节点中层级最高.
由于篇幅太长,本文仅从节点属性角度举行会商,没有触及select和iframe等特别页面节点思索,假如无机会下次再为人人分享.

在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

作者: 老尸 时间: 2015-1-17 06:01
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 灵魂腐蚀 时间: 2015-1-20 15:06
可以使用 CSS 检查工具进行设计。

作者: 飘飘悠悠 时间: 2015-1-29 12:10
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 莫相离 时间: 2015-2-6 00:49
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 变相怪杰 时间: 2015-2-14 17:31
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 山那边是海 时间: 2015-3-4 09:40
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 若相依 时间: 2015-3-11 18:11
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 谁可相欹 时间: 2015-3-19 06:51
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 因胸联盟 时间: 2015-3-27 12:24
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

欢迎光临仓酷云 (http://ckuyun.com/)