谈谈CSS中的z-index属性

ゝ一纸荒年。 2022-08-26 11:16 168阅读 0赞

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>  </div> </body> </html>

以上的那个<script src="jquery1.9.1.js" type="text/javascript"></script>这个是要自己下载jquery的封装好的方法，然后再调用的。当然你也可以在线调用，都可以。

这个例子主要是让大家了解z-index的用法，和怎样结合position属性使用。至于z-index的兼容问题，我会之后总结好了再写一篇专门解决z-index的博客的。