CSS实例教程:元素堆叠级別及z

日期:2021-03-16 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑


原文:http://rong179.blogbus.com/logs/24966909.html
申明
精准定位元素: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级。
上1页12 下1页 阅读文章全文