《
z-index相关知识点介绍》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302336392013.htm
在一个堆叠上下文中的每个box ，都有一个stack level（即堆叠级别，以下同一用堆叠级别），它决定着在同一堆叠上下文中每个box 在z 轴上的显示顺序。同一堆叠上下文中，堆叠级别值大的显示在上，堆叠级别值小的显示在下，统一堆叠级别遵守青出于蓝的准则（back-to-front ）。不同堆叠上下文中，子元素显示次序以父级的堆叠上下文的堆叠级别来决定显示的先后情形,XML和Java技术 - 数据绑定的多种用法。于本身堆叠级别无关。说白了就是父元素的堆叠上下文的堆叠级别决议了子元素堆叠级别未来的发展，父元素堆叠级别低，则子元素堆叠级别就必定比父元素堆叠级别高的子元素堆叠级别低，即便这个子元素在他父元素内部的堆叠级别再高也杯水车薪。
这里最轻易搞混的就是堆叠级别和z-index ，大多数时候感到他们是同一个货色,XHTML标准的DIV+CSS布局对于网站SEO的影响，而事实上他们仍是有区别的，个人以为，当不z-index 时候，咱们所依附的准则是以堆叠级别的后来居上的原则来断定顺序。假如在一个堆叠上下文，个别就是在body 下，俩个不同的z-index 的时候，以z-index 大小来判断上下顺序，而我们平时印象里留心的最多的就是z-index ，所以往往曲解了堆叠级别和z-index 的差别。
2. FF, Safari, Chrome下元素设置opacity属性（1除外）会产生stacking context；(除了Opera)
在FF跟IE下查看如下代码：
z-index：auto | number
只有定位元素的z-index 被定义一个非auto 的z-index 值才干产生新的stacking context。而例子中wrap1 元素并没有定义 z-index，即z-index 为默认值auto 。所以按理他不会影响子元素的层叠顺序。即背风景为红色的wrap1 和背景色为绿色的 wrap2 的stacking context 相同，即都为根元素产生的root stacking context。再依据规则中当stacking context 一样的时候，就用z-index 的值来决定怎么显示的原理，则应该z-index 属性值300的.inner1 在 z-index 属性值100wrap2之上。我们在Firefox 和IE 中分辨测试终极的效果，会发现Firefox 中显示的后果和上面分析的效果是完整一致的,XHTML+CSS兼容解决方案，而IE 中的显示却不一致。
每个定位元素都归属于一个stacking context（即堆叠上下文，以下统一用堆叠上下文），最初的堆叠上下文（即根部堆叠上下文）是由根元素产生（普通页面的根元素是body），而其余的堆叠上下文则由定位元素产生（此定位元素的z-index 被定义一个非auto 的z-index 值），定位子元素会以这个基准堆叠上下文为参考，用相同的规矩来决定层叠顺序。
留神：z-index 属性实用于那些被定义了除position:static 外任意属性的元素中。即z-index 仅能在定位元素上见效（position: absolute | relative | fix）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>z-index 浏览器兼容问题</title> <style> .wrap1{position:relative;} .inner1{width:200px; height:200px; background:#fcc; position:absolute; top:100px; left:200px; z-index:300;} .wrap2{width:200px,word-wrap和word-break解决连续字符自动换行; height:200px; background:#cfc; position:absolute; top:50px; left:150px; z-index:100;} </style> </head> <body> <div class=",web设计师必须熟练掌握的10个CSS3属性;wrap1"> <div class="inner1">这里是wrap1 这个box应该在上面</div> </div> <,Web设计师应该知道的十个SEO常识;div class="wrap2"> 这里是wrap2 这个box应当在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。 <,web网页交互设计 页面表达常用方式;/div> </body> </html>
stacking context 重叠高低文
ff中给元素设置opacity属性（1除外）可产生新的stacking context
JavaScript 语法： object.style.zIndex=”1″
页面中元素在z轴方向上的排列，先由堆叠上下文决定，如果是相同的堆叠上下文那么由堆叠级别决定（后来居上原则），如果又是雷同的堆叠级别（同一个父元素），则由z-index 决定。
--> [
网站建设之]z-index相干常识点先容
[ 提醒：你可先修正局部代码，再按Ctrl+A 全体抉择 ]
Tag：z-index z-index
stack level 堆叠级别
3. IE6,Web网站前端优化策略总结,7下的定位元素，无论设置了z-index，或无论z-index设置成什么值，都会发生新的 stacking context。
起因：实在这是IE 阅读器（windows）的一个BUG —&mdash,Web界面设计 Web可读性的三个层次;在IE 浏览器中，定位元素会产生一个新的stacking context,Web标准 DIV+CSS对SEO的帮助，并且从z-index 的值为0开端。ie 中给元素设置position 属性（static除外）可产生新的stacking context。
z-index
number：无单位的整数值，可为负数
z-index 属性设置元素的堆叠顺序。领有更高堆叠顺序的元素老是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿z 轴的地位，z 轴定义为垂直延长到显示区的轴。如果为正数，则离用户更近，为负数则表现离用户更远。——W3shcool
1. 定位元素并且定义了z-index为非auto；
z-index 浏览器兼容问题
z-index 定义和用法
笔者在工作中发明在IE6下select 这个控件仿佛无奈用z-index 属性暗藏，我们来剖析下原因，这里总结一些z-index相关的一些知识。
stacking context & stack level & z-index 是什么
触发stacking context
除此之外只有定位元素设置了z-index(auto除外)才会产生新的stacking context，子元素将依照新的stacking context，定位。
默认值：auto 堆叠顺序与父元素相等
(责任编辑：网站建设)
z-index相关知识点介绍相关文章