CSS Z-INDEX属性使用过程中遇到的问题
CSS Z-INDEX属性使用过程中遇到的问题
z-index属性在web开发中会经常使用，其主要的作用简单的说就是把元素的position设置为absolute、fixed之后，可以调节元素在文档上的层级关系。比如经常见到的dialog，mask的实现，dialog的z-index肯定要设置的比mask大。写这篇文章的目的主要是想记录下遇到的有关z-index可设置的最大值的问题。下面先来看以下代码运行的结果：
这个demo的目的是查找z-index在各主流浏览器里面可以设置的临界值（最大值），首先要说下为什么会有临界值。在平时的开发过程中曾经遇到过这样的情况，比如有A、B两个元素，B元素要显示到A元素上面，也就是说B元素的z-index要比A元素的大，这个时候如果A元素本身的z-index值也很大，而我想通过先获取A元素的z-index之后通过parseInt方法把得到到的z-index转化成整数然后拿这个值+1，但是却遇到了一个问题，通过parseInt转化后得到值很小，这到底是怎么回事呢？通过调试发现，是因为firefox把很大的z-index值通过科学计数法来表示了。这样通过parseInt转化后得到很小的值也就很容易理解了，比如parseInt("1e+7", 10)得到结果是1。
给元素设置z-index有两种方式，一种是通过样式表给元素设置z-index，另外一种是通过元素的style属性设置，这个demo中提供了两种方式设置以及两种方式的获取来检测每种设置方法可以设置的临界值。
结论：通过检测发现ie6-9，chrome没有本文讨论的临界值问题，只有firefox有这个问题，所以在使用z-index时候还是要稍稍注意下的。前面说了设置&获取z-index都有两种方式，那么两种获取方式是否有区别呢？经过测试发现确实有区别，如果通过window.getComputedStyle(elem, null).getPropertyValue('z-index')方式获取，元素可设置的z-index临界值是。如果通过elem.style.zIndex方法获取的话元素可以设置的z-index临界值是2147483647。
这个demo中使用了kissy seed模块，用到的是功能有获取dom元素、获取（设置）样式表里面的z-index属性，style里面的z-index属性和获取浏览器类型和版本号。当然这里可以用原生js或者jQuery框架来实现。kissy和jQuery的css方法内部实现原理一样，主要是通过window.getComputedStyle(elem, null).getPropertyValue(prop)实现的，这种方法会优先获取元素style里面的z-index，如果style里面没有设置z-index则去获取样式表里面对元素设置的z-index。
z-index属性在web开发中会经常使用，其主要的作用简单的说就是把元素的position设置为absolute、fixed之后，可以调节元素在文档上的层级关系。比如经常见到的dialog，mask的实现，dialog的z-index肯定要设置的比mask大。写这篇文章的目的主要是想记录下遇到的有关z-index可设置的最大值的问题。下面先来看以下代码运行的结果：
这个demo的目的是查找z-index在各主流浏览器里面可以设置的临界值（最大值），首先要说下为什么会有临界值。在平时的开发过程中曾经遇到过这样的情况，比如有A、B两个元素，B元素要显示到A元素上面，也就是说B元素的z-index要比A元素的大，这个时候如果A元素本身的z-index值也很大，而我想通过先获取A元素的z-index之后通过parseInt方法把得到到的z-index转化成整数然后拿这个值+1，但是却遇到了一个问题，通过parseInt转化后得到值很小，这到底是怎么回事呢？通过调试发现，是因为firefox把很大的z-index值通过科学计数法来表示了。这样通过parseInt转化后得到很小的值也就很容易理解了，比如parseInt("1e+7", 10)得到结果是1。
给元素设置z-index有两种方式，一种是通过样式表给元素设置z-index，另外一种是通过元素的style属性设置，这个demo中提供了两种方式设置以及两种方式的获取来检测每种设置方法可以设置的临界值。
结论：通过检测发现ie6-9，chrome没有本文讨论的临界值问题，只有firefox有这个问题，所以在使用z-index时候还是要稍稍注意下的。前面说了设置&获取z-index都有两种方式，那么两种获取方式是否有区别呢？经过测试发现确实有区别，如果通过window.getComputedStyle(elem, null).getPropertyValue('z-index')方式获取，元素可设置的z-index临界值是。如果通过elem.style.zIndex方法获取的话元素可以设置的z-index临界值是2147483647。
这个demo中使用了kissy seed模块，用到的是功能有获取dom元素、获取（设置）样式表里面的z-index属性，style里面的z-index属性和获取浏览器类型和版本号。当然这里可以用原生js或者jQuery框架来实现。kissy和jQuery的css方法内部实现原理一样，主要是通过window.getComputedStyle(elem, null).getPropertyValue(prop)实现的，这种方法会优先获取元素style里面的z-index，如果style里面没有设置z-index则去获取样式表里面对元素设置的z-index。