CSS元素的堆叠与z

2021-03-16 13:19 jianzhan

  大家在文章内容的升级中,非常重视对初学者的指导,但jb51.net应对的是众多的开发设计人员,大伙儿将会会遇到各种各样各种各样的难题,一些难题很不普遍,或运用的非常少,但大家仍然必须学习培训更多的CSS合理布局专业知识与技术性,以解决将会出現的繁杂多变的CSS內外情势(挺汗)。今日这篇文章内容,关键详细介绍了元素的堆叠与z-index设定,期待对您有一定的协助,更多的专业知识,请多多参照jb51.net的实例教程。
申明
  精准定位元素:position特性值设定除默认设置值static之外的元素,包含relative,absolute,fixed。
  服务平台:win/IE win/FF
z-index:
  用来明确精准定位元素在竖直于显示信息屏方位(下列称为Z轴)上的堆叠次序
  值:   auto | 整数金额 | inherit
  默认设置:  auto
  可用于: 精准定位元素
  承继性: no
了解stacking context
  每一个box都属于1个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
  在1个stacking context中的每一个box,都有1个stack level(即堆叠级別,下列统1用stack level),它决策着在同1stacking context中每一个box在z轴上的显示信息次序。同1stacking context中,stack level值大的显示信息在上,stack level值小的显示信息在下,同1stack level的遵照后来者居上的标准(back-to-front )。不一样stacking context中,元素显示信息次序以父级的stacking context的stack level来决策显示信息的前后状况。于本身stack level不相干。留意stack level和z-index其实不是统1定义。(将在后文渐渐地了解)
stack level标准
  每一个stacking context中可包括块级(block)元素、内联(行内inline)元素,也有设定float特性的元素、精准定位元素这些她们在同1父级 stacking context中的显示信息次序是如何的?即stack level是如何的呢?例如1个块级元素和内联元素产生堆叠的话谁会在上面呢?是否谁在后边谁就在上面呢?
  依据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元素)处在同1级。
FF下检测
检测网页页面: 01.html(请各自在FF3.0和FF2.0中开启)
编码表明:
  由前所述,假如元素的stack level同级则后来者居上;元素的stack level高,这不管编码在文本文档中部位怎样都显示信息在上面,即便编码在最前面;假如元素的stack level低,不管编码部位怎样都将显示信息在下面,即便编码在最终面。
  大家就依据这1点,以“3.文字流中非精准定位的、block块级子元素”和“4.文字流中非精准定位的、float波动子元素”为例,假如我把“float元素” 的编码写在“block元素”的前面,且具体显示信息为:“float元素”在“block元素”之上。便可证实:"float元素”的stack level级別较“block元素”高。由于假如同级,或“block元素”的stack level高都应是“block元素”显示信息在上。
  依据以上,依据规范中的次序,把stack level高的元素编码写在前面,stack level低的编码写在后边,假如显示信息結果是:编码在前面的元素显示信息在上方 ,即证实上面的stack level标准。
检测結果:
  在FF3.0中結果和规范次序1致。FF2.0中“z-index值为负值的精准定位元素”在父级stacking context的情况下面。(留意ff2.0的这个独特性)
IE下检测
检测网页页面: 2.html (请在IE下访问)
编码表明:
  此编码也是依据上面的检测观念,但因为inline元素在ie中的独特性,把inline的编码写在了后边,客观事实证实结果是正确的。针对“block元素”和“float元素”次序大伙儿能够互换次序检测。
检测结果:
  IE下(不管ie6.0或ie7.0)“float元素”和“block元素”属同1stack level,而“inline元素”较其stack level低。
解释表明:
了 “float元素”,“z-index:auto的精准定位元素”好像造成了新的stacking context,但其真实能造成新的stacking context的子孙后代任按其父级stacking context精准定位。(但IE中“z-index:auto的精准定位元素”
会有着z-index值0,造成1个新的stacking context,并危害其子元素精准定位。这是IE1个BUG)
inline元素在FF中好像能造成新的stacking context,而在IE中则不可以。
  至此stack level标准內容早已结束,如今应当能了解stack level和z-index的不一样。stack level来决策这1个stacking context中各元素在z轴上的显示信息次序,针对同1stack level的精准定位元素才由z-index进1步决策显示信息顺序。
1些难题的解释
怿飞版主在《z-index在IE中的蒙蔽》1文中最终提到的难题:
演试详细地址: 3.html
觉得:
解惑:IE访问器好像给body元素默认设置了1个相对性精准定位特性(position: relative)。
简直这样吗?
演试详细地址: 4.html
剖析:
  box1显示信息在body的正下方,依据上面的stack level标准,IE中,假如body默认设置了1个部位特性,即body是其父级stacking context,box1应显示信息在其上方,客观事实却并不是这样。并且当大家给body再加position:relative之后,显示信息实际效果和stack level标准1致。因此body并沒有默认设置部位特性。
  那为何负值的精准定位元素在IE和FF下显示信息不1致呢?
  ie 中依据stack level标准: z-index为负的精准定位元素的stack level比父级stacking context(此处是root stacking context)高,显示信息在其上方。故box1在ie中能显示信息。ff3.0和规范1致,也能显示信息。大伙儿能够试1下。
  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].
总结:
  在1个stacking context中元素的z-轴显示信息次序,由元素所处的 stack level 决策。针对同1stack level的精准定位元素由z-index的尺寸进1步决策显示信息顺序。
  ie中给元素设定position特性(static以外)可造成新的stacking context
  ff中给元素设定opacity特性(1以外)可造成新的stacking context
  除此以外(或许设定别的特性也会造成新的stacking context,但还不知道道)仅有精准定位元素设定了z-index(auto以外)才会造成新的stacking context,子元素将依照新的stacking context,精准定位。