CSS元素的层叠与z-index配置
发布时间：2018-08-20 12:49:17 所属栏目：创业 来源：站长网
导读：我们在文章的更新中，出格注重对新手的向导，但webjx.com面临的是宽大的开拓职员，各人也许会碰着各类百般的题目，有些题目很不常见，可能应用的很少，但我们依然有须要进修更多的CSS机关常识与技能，以应对也许呈现的伟大多变的CSS表里形势（挺汗）。本日
|
我们在文章的更新中，出格注重对新手的向导，但webjx.com面临的是宽大的开拓职员，各人也许会碰着各类百般的题目，有些题目很不常见，可能应用的很少，但我们依然有须要进修更多的CSS机关常识与技能，以应对也许呈现的伟大多变的CSS表里形势（挺汗）。本日这篇文章，首要先容了元素的层叠与z-index配置，但愿对您有所辅佐，更多的常识，请多多参考webjx.com的教程。 声明 定位元素：position属性值配置除默认值static以外的元素，包罗relative，absolute，fixed。 平台：win/IE win/FF z-index: 用来确定定位元素在垂直于表现屏偏向（以下称为Z轴）上的层叠次序 值： auto | 整数 | inherit 默认： auto 合用于： 定位元素 担任性： no 领略stacking context 每个box都归属于一个stacking context,它是元素在z轴偏向上定位的参考。根元素形成 root stacking context，其他stacking context由定位元素配置z-index为非auto时发生。如#div1{position:relative;z-index:0;}即可使 id=div1的元素发生stacking context。stacking context和 containing block 并没有肯定接洽。 领略stack level 在一个stacking context中的每个box，都有一个stack level（即层叠级别，以下同一用stack level），它抉择着在统一stacking context中每个box在z轴上的表现次序。统一stacking context中，stack level值大的表现在上，stack level值小的表现在下，统一stack level的遵循其后居上的原则（back-to-front ）。差异stacking context中，元素表现次序以父级的stacking context的stack level来抉择表现的先后环境。于自身stack level无关。留意stack level和z-index并不是同一观念。（将在后文逐步领略） stack level法则 每个stacking context中可包括块级（block）元素、内联（行内inline）元素，尚有配置float属性的元素、定位元素等等他们在统一父级 stacking context中的表现次序是奈何的？即stack level是奈何的呢？好比一个块级元素和内联元素产生层叠的话谁会在上面呢？是不是谁在后头谁就在上面呢？ 按照w3c关于stack level的先容可以得出以下stack level法则 每个stacking context都包罗以下stack level （其后居上）: 父级stacking context的配景、界线 z-index值为负值的定位元素（值越小越在下） 文本流中非定位的、block块级子元素 文本流中非定位的、float浮动子元素 似乎能发生stacking context的inline元素 不然，inline元素的stack level将在block元素之前。 z-index：auto/0的定位元素 z-index值为正的定位元素（值越大越在上） 以上stack level在赏识器执行环境： firefox3.0下测试完全相符，firefox2.0下稍有差异即：“z-index值为负值的定位元素”在“父级stacking context的配景、界线”之前。 ie6.0和7.0中：inline元素的stack level位于block元素之前，且“文本流中非定位的、float浮动子元素”（以下简称浮动元素）和“文本流中非定位的、block块级子元素”（以下简称block元素）处于统一级。 FF下测试 测试页面： 01.html（请别离在FF3.0和FF2.0中打开） 代码声名： 由前所述，假如元素的stack level同级则其后居上；元素的stack level高，这无论代码在文档中位置怎样都表现在上面，纵然代码在最前面；假如元素的stack level低，无论代码位置怎样都将表现在下面，纵然代码在最后头。 我们就按照这一点，以“3.文本流中非定位的、block块级子元素”和“4.文本流中非定位的、float浮动子元素”为例，假如我把“float元素” 的代码写在“block元素”的前面，且现实表现为：“float元素”在“block元素”之上。即可证明："float元素”的stack level级别较“block元素”高。由于假犹如级,可能“block元素”的stack level高都应是“block元素”表现在上。 按照以上，按照尺度中的次序，把stack level高的元素代码写在前面，stack level低的代码写在后头，假如表现功效是：代码在前面的元素表现在上方 ，即证明上面的stack level法则。 测试功效： 在FF3.0中功效和尺度次序同等。FF2.0中“z-index值为负值的定位元素”在父级stacking context的配景下面。（留意ff2.0的这个非凡性） IE下测试 测试页面： 2.html (请在IE下赏识) 代码声名： 此代码也是按照上面的测试头脑，但因为inline元素在ie中的非凡性，把inline的代码写在了后头，究竟证明结论是正确的。对付“block元素”和“float元素”次序各人可以互换次序测试。 测试结论： IE下（无论ie6.0可能ie7.0）“float元素”和“block元素”属统一stack level，而“inline元素”较其stack level低。 表明声名： 了 “float元素”，“z-index：auto的定位元素”似乎发生了新的stacking context，但其真正能发生新的stacking context的儿女任按其父级stacking context定位。（但IE中“z-index：auto的定位元素” 会拥有z-index值0，发生一个新的stacking context，并影响其子元素定位。这是IE一个BUG） inline元素在FF中似乎能发生新的stacking context，而在IE中则不能。 至此stack level法则内容已经完毕，此刻应该能领略stack level和z-index的差异。stack level来抉择这一个stacking context中各元素在z轴上的表现次序，对付统一stack level的定位元素才由z-index进一步抉择表现序次。 一些题目的表明 怿飞版主在《z-index在IE中的疑惑》一文中最后提到的题目： 演示地点： 3.html 以为： 解惑：IE赏识器好像给body元素默认了一个相对定位属性（position: relative）。 真是这样吗？ 演示地点： 4.html 说明： box1表现在body的下方，按照上面的stack level法则，IE中，假如body默认了一个位置属性，即body是其父级stacking context，box1应表现在其上方，究竟却不是这样。并且当我们给body加上position：relative往后，表现结果和stack level法则同等。以是body并没有默认位置属性。 那为什么负值的定位元素在IE和FF下表现纷歧致呢？ ie 中按照stack level法则： z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）高，表现在其上方。故box1在ie中能表现。ff3.0和尺度同等，也能表现。各人可以试一下。 ff2.0 中因为那条非凡的stack level，即 z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）低，以是表现在root stacking context下方。故不能望见。 其它，上面的代码中加上opacity那条后，在ff2.0中即可表现了。这又是什么缘故起因呢？ 展望：在火狐中假如给元素配置opacity属性（1除外），即会发生新的stacking context。 上面加上opacity属性后在ff2.0中可表现box1在body下，ff3.0box1在body上，（可以按照上面的stack level法则本身说明）切合展望。 在w3c的声名中也证明这点 In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity' [CSS3COLOR]. 总结： 在一个stacking context中元素的z-轴表现次序，由元素所处的 stack level 抉择。对付统一stack level的定位元素由z-index的巨细进一步抉择表现序次。 ie中给元素配置position属性（static除外）可发生新的stacking context ff中给元素配置opacity属性（1除外）可发生新的stacking context 除此之外（大概配置其他属性也会发生新的stacking context，但还不知道）只有定位元素配置了z-index(auto除外)才会发生新的stacking context，子元素将凭证新的stacking context，定位。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
