谈一下CSS中的z-index属性
日期：2014-05-16 浏览次数：20865 次
CSS中的z-index属性一直是让人欢喜让人忧，做网站用到z-index最多的地方莫过于文本和图片的综合展示这块和弹出层这块。
前者倒还可以处理，后者弹出层这块，我不管用css还是js做弹出层都要用到z-index这个属性吧，个人偏向于只用css实现弹出层的功能，js毕竟不太熟，而且逻辑有点混乱对于我来说。在谷歌上做好了，到ie上调试看看，十有八九不兼容还是咋的，要么弹出层不见了，要么弹出层跑到内容的下面去了，很让人头疼。
我这里就不提供弹出层在各个浏览器中正常显示的解决方案了，个人知识有限。
这里我就谈谈z-index这个属性的基本用法和注意事项
z-index属性是用来设置元素的堆叠顺序的，也是按照优先级来显示的，有更高堆叠顺序的元素总是处于堆叠顺序低的元素之上。
那什么来决定优先级呢，就是z-index的值，能取正，能取负，默认是0，当然正的优先级就大了。
其实很多人还是不理解z-index的原理，其实对于我来说，我是这样认为的，你的电脑屏幕是2维的(看成x轴y轴嘛)，你看屏幕的视线是正对屏幕的吧，把你的视线看成第3维(也就是z轴好了)，z-index这个名字就很形象，在z轴的索引顺序，这里就是指在z轴的顺序就好。正的离你的眼睛更近，负的离你眼睛远，你当然看得是离你眼睛近的啦，远的就被近的挡住了，这里指堆叠上去了。
特别注意：z-index仅能在定位元素上奏效，至于什么是定位元素相应的定位属性，我之前的一篇博客有关于这个的讲解。
下面是我用z-index结合position，还有部分jquery代码做的很简陋很简陋例子，可以用作网站主页的指引页面，很节约空间，当然仅供参考，其中js代码未作优化，有冗余，你也可以不写在这个页面，封装好直接调用。感兴趣的大家可以粘贴下自己看看效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页示例</title>
<script src="jquery1.9.1.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
var left = document.getElementById("div1").offsetLeft;
if(left==203)
{
$("#div1").animate({left:'1066px'});
}
else
{
$("#div1").animate({left:'203px'});
}
});
$("#div2").click(function(){
var left = document.getElementById("div2").offsetLeft;
if(left==303)
{
$("#div2").animate({left:'1166px'});
}
else
{
$("#div2").animate({left:'303px'});
}
});
$("#div3").click(function(){
var left = document.getElementById("div3").offsetLeft;
if(left==403)
{
$("#div3").animate({left:'1266px'});
}
else
{
$("#div3").animate({left:'403px'});
}
});
});
</script>
</head>
<body>
<div>
<div id="div1" style="width:960px; height:600px; background-color:#F00; z-index:1; position:absolute; top:10px; left:1066px"></div>
<div id="div2" style="width:960px; height:600px; background-color:#0F0; z-index:2; position:absolute; top:10px; left:1166px"></div>
<div id="div3" style="width:960px; height:600px; background-color:#00F; z-index:3; position:absolute; top:10px; left:1266px"></div>
