css z-index属性使用过程中遇到的问题
2013-07-20 18:21
357 查看
z-index属性在web开发中会经常使用，其主要的作用简单的说就是把元素的position设置为absolute、fixed之后，可以调节元素在文档上的层级关系。比如经常见到的dialog，mask的实现，dialog的z-index肯定要设置的比mask大。写这篇文章的目的主要是想记录下遇到的有关z-index可设置的最大值的问题。下面先来看以下代码运行的结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css z-index属性在主流浏览器中临界值</title>
<style type="text/css">
html, body, fieldset {
margin: 0;
padding: 0;
}
body {
font:12px/1.5 'Lucida Grande',tahoma,arial,\5b8b\4f53;
*line-height:1.5;
}
.header {
margin: 20px;
}
.header h3 {
width: 380px;
}
.page {
margin: 0 10px;
}
.zIndex-wrapper {
margin: 10px;
}
.zIndex-normal {
color: #999;
}
.zIndex-warning {
color: #ff0000;
}
#J_zIndex {
margin-left: 8px;
}
.zIndex-browser {
margin: 15px 0;
}
.zIndex-browser .browser {
margin-left: 8px;
}
.zIndex-startValue {
margin: 15px 0;
}
.zIndex-startValue input {
margin-left: 8px;
}
.zIndex-buttons-wrapper {
width: 450px;
margin-bottom: 10px;
display: block;
}
.zIndex-buttons-wrapper legend {
overflow: hidden;
white-space: nowrap;
width: 430px;
cursor: default;
}
.zIndex-buttons-wrapper .zIndex-legend {
width: 190px;
}
.zIndex-buttons {
margin: 10px;
}
</style>
<script type="text/javascript" src="http://l.tbcdn.cn/??s/kissy/1.3.0/seed.js"></script>
</head>
<body>
<div class="header">
<h3>css z-index属性使用过程中遇到的问题</h3>
</div>
<div class="page">
<div class="zIndex-wrapper">
<div class="zIndex-browser">
浏览器：
<span id="J_browser" class="browser"></span>
</div>
<div class="zIndex-startValue">
<label for="startValue">开始值：</label>
<input type="text" id="J_startValue" name="startValue" />
</div>
z-index：
<span class="zIndex-normal" id="J_zIndex"></span>
</div>
<div id="J_mask" class="tm-mask"></div>
<fieldset class="zIndex-buttons-wrapper">
<legend title="通过window.getComputedStyle(elem, null).getPropertyValue(prop)获取元素z-index属性">通过window.getComputedStyle(elem, null).getPropertyValue(prop)获取元素z-index属性</legend>
<div class="zIndex-buttons">
<button class="button" data-set="ByLink" data-get="ByComputedStyle">通过样式表设置z-index</button>
<button class="button" data-set="ByStyle" data-get="ByComputedStyle">通过style设置z-index</button>
</div>
</fieldset>
<fieldset class="zIndex-buttons-wrapper">
<legend class="zIndex-legend">通过elem.style获取元素z-index属性</legend>
<div class="zIndex-buttons">
<button class="button" data-set="ByStyle" data-get="ByStyle">通过style设置z-index</button>
</div>
</fieldset>
</div>
<script>
KISSY.use(['dom', 'event', 'ua'], function(S, DOM, Event, UA) {
var zIndex = {
init: function() {
this.initView();
this.getBrowser();
this.regEvent();
},
initView: function() {
DOM.val('#J_startValue', this.start);
},
regEvent: function() {
var that = this,
target;
Event.on('.button', 'click', function(ev) {
target = ev.target;
that.start = DOM.val('#J_startValue');
DOM.text('#J_zIndex', '');
DOM.removeClass('#J_zIndex', 'zIndex-warning');
clearInterval(that.interval);
that.interval = setInterval(function() {
that['get' + target.getAttribute('data-get')](that['set' + target.getAttribute('data-set')]);
}, 100);
});
//blur事件处理函数重置start值
Event.on('#J_startValue', 'blur', function() {
that.start = this.value;
});
},
getBrowser: function() {
DOM.text('#J_browser', UA.shell + UA[UA.shell]);
},
//获取临界值
get: function(value, set) {
//科学计数法表示的z-index值
if(/^([0-9]+[.]?[0-9]*|[0-9]*[.][0-9]+)[eE][+-]?[0-9]+$/.test(value) || value >= this.max) {
DOM.removeClass('#J_zIndex', 'zIndex-normal');
DOM.addClass('#J_zIndex', 'zIndex-warning');
//显示z-index临界值
DOM.text('#J_zIndex', this.start);
clearInterval(this.interval);
//清除使用过的style标签和元素style属性
this.clear();
}else{
DOM.text('#J_zIndex', this.start++);
set(this.start);
}
},
getByComputedStyle: function(set) {
this.get(DOM.css('#J_mask', 'z-index'), set);
},
getByStyle: function(set) {
this.get(DOM.get('#J_mask').style.zIndex, set);
},
setByLink: function(value) {
//移除上次设置的style
DOM.remove('.zIndex-style');
//设置新的z-index值
DOM.append(DOM.create('<style class="zIndex-style">.tm-mask {z-index: ' + value + '}</style>'), 'head');
},
setByStyle: function(value) {
var mask = DOM.get('#J_mask');
if(!DOM.attr(mask, 'data-zIndex')) {
DOM.attr(mask, 'data-zIndex', mask.style.zIndex);
}
DOM.css('#J_mask', 'z-index', value);
},
clear: function() {
var mask = DOM.get('#J_mask');
DOM.remove('.zIndex-style');
mask.style.zIndex = DOM.attr(mask, 'data-zIndex');
},
//z-index开始值
start: 9999900,
//firefox下通过elem.style.zIndex = '';方式设置z-index
//能设置的最大值是2147483647
max: 2147483647,
interval: 0
};
//run
zIndex.init();
});
</script>
</body>
</html>
这个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临界值是9999995。如果通过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。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css z-index属性在主流浏览器中临界值</title>
<style type="text/css">
html, body, fieldset {
margin: 0;
padding: 0;
}
body {
font:12px/1.5 'Lucida Grande',tahoma,arial,\5b8b\4f53;
*line-height:1.5;
}
.header {
margin: 20px;
}
.header h3 {
width: 380px;
}
.page {
margin: 0 10px;
}
.zIndex-wrapper {
margin: 10px;
}
.zIndex-normal {
color: #999;
}
.zIndex-warning {
color: #ff0000;
}
#J_zIndex {
margin-left: 8px;
}
.zIndex-browser {
margin: 15px 0;
}
.zIndex-browser .browser {
margin-left: 8px;
}
.zIndex-startValue {
margin: 15px 0;
}
.zIndex-startValue input {
margin-left: 8px;
}
.zIndex-buttons-wrapper {
width: 450px;
margin-bottom: 10px;
display: block;
}
.zIndex-buttons-wrapper legend {
overflow: hidden;
white-space: nowrap;
width: 430px;
cursor: default;
}
.zIndex-buttons-wrapper .zIndex-legend {
width: 190px;
}
.zIndex-buttons {
margin: 10px;
}
</style>
<script type="text/javascript" src="http://l.tbcdn.cn/??s/kissy/1.3.0/seed.js"></script>
</head>
<body>
<div class="header">
<h3>css z-index属性使用过程中遇到的问题</h3>
</div>
<div class="page">
<div class="zIndex-wrapper">
<div class="zIndex-browser">
浏览器：
<span id="J_browser" class="browser"></span>
</div>
<div class="zIndex-startValue">
<label for="startValue">开始值：</label>
<input type="text" id="J_startValue" name="startValue" />
</div>
z-index：
<span class="zIndex-normal" id="J_zIndex"></span>
</div>
<div id="J_mask" class="tm-mask"></div>
<fieldset class="zIndex-buttons-wrapper">
<legend title="通过window.getComputedStyle(elem, null).getPropertyValue(prop)获取元素z-index属性">通过window.getComputedStyle(elem, null).getPropertyValue(prop)获取元素z-index属性</legend>
<div class="zIndex-buttons">
<button class="button" data-set="ByLink" data-get="ByComputedStyle">通过样式表设置z-index</button>
<button class="button" data-set="ByStyle" data-get="ByComputedStyle">通过style设置z-index</button>
</div>
</fieldset>
<fieldset class="zIndex-buttons-wrapper">
<legend class="zIndex-legend">通过elem.style获取元素z-index属性</legend>
<div class="zIndex-buttons">
<button class="button" data-set="ByStyle" data-get="ByStyle">通过style设置z-index</button>
</div>
</fieldset>
</div>
<script>
KISSY.use(['dom', 'event', 'ua'], function(S, DOM, Event, UA) {
var zIndex = {
init: function() {
this.initView();
this.getBrowser();
this.regEvent();
},
initView: function() {
DOM.val('#J_startValue', this.start);
},
regEvent: function() {
var that = this,
target;
Event.on('.button', 'click', function(ev) {
target = ev.target;
that.start = DOM.val('#J_startValue');
DOM.text('#J_zIndex', '');
DOM.removeClass('#J_zIndex', 'zIndex-warning');
clearInterval(that.interval);
that.interval = setInterval(function() {
that['get' + target.getAttribute('data-get')](that['set' + target.getAttribute('data-set')]);
}, 100);
});
//blur事件处理函数重置start值
Event.on('#J_startValue', 'blur', function() {
that.start = this.value;
});
},
getBrowser: function() {
DOM.text('#J_browser', UA.shell + UA[UA.shell]);
},
//获取临界值
get: function(value, set) {
//科学计数法表示的z-index值
if(/^([0-9]+[.]?[0-9]*|[0-9]*[.][0-9]+)[eE][+-]?[0-9]+$/.test(value) || value >= this.max) {
DOM.removeClass('#J_zIndex', 'zIndex-normal');
DOM.addClass('#J_zIndex', 'zIndex-warning');
//显示z-index临界值
DOM.text('#J_zIndex', this.start);
clearInterval(this.interval);
//清除使用过的style标签和元素style属性
this.clear();
}else{
DOM.text('#J_zIndex', this.start++);
set(this.start);
}
},
getByComputedStyle: function(set) {
this.get(DOM.css('#J_mask', 'z-index'), set);
},
getByStyle: function(set) {
this.get(DOM.get('#J_mask').style.zIndex, set);
},
setByLink: function(value) {
//移除上次设置的style
DOM.remove('.zIndex-style');
//设置新的z-index值
DOM.append(DOM.create('<style class="zIndex-style">.tm-mask {z-index: ' + value + '}</style>'), 'head');
},
setByStyle: function(value) {
var mask = DOM.get('#J_mask');
if(!DOM.attr(mask, 'data-zIndex')) {
DOM.attr(mask, 'data-zIndex', mask.style.zIndex);
}
DOM.css('#J_mask', 'z-index', value);
},
clear: function() {
var mask = DOM.get('#J_mask');
DOM.remove('.zIndex-style');
mask.style.zIndex = DOM.attr(mask, 'data-zIndex');
},
//z-index开始值
start: 9999900,
//firefox下通过elem.style.zIndex = '';方式设置z-index
//能设置的最大值是2147483647
max: 2147483647,
interval: 0
};
//run
zIndex.init();
});
</script>
</body>
</html>
这个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临界值是9999995。如果通过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。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS Z-INDEX属性使用过程中遇到的问题
- 微信后台开发三大框架使用过程中遇到的问题
- CSS z-index 属性的使用方法和层级树的概念
- Battery Historian2.0使用过程中遇到的一些问题
- fastDB使用过程中遇到的几个问题
- tensorflow使用过程遇到的问题
- mini2440交叉编译工具安装及使用过程中可能会遇到的问题及解决办法
- ElasticSearch使用过程中遇到的问题
- eclipse使用技巧以及开发安卓程序过程中遇到的问题
- selenium使用过程中遇到的问题
- 【dom4j xml】使用dom4j处理XML文件--测试过程遇到的问题
- 关于WEBAPI 的使用 和WEBAPI CORS 的使用过程遇到的问题
- Ueditor使用过程中遇到的问题和解决方法
- Android studio使用过程中遇到的问题
- 在使用postman过程中遇到的小问题
- MySql使用过程中常常遇到的一些问题
- css使用中遇到的小问题
- CSS z-index 属性的使用方法和层级树的概念
- 使用mssql2008新特性(存储过程参数类型使用"用户自定义表"来实现批量DML更新多表)解决项目里遇到的性能问题
- hadoop安装和使用过程中遇到的问题