对于很多认识z-index的朋友来说,z-index就是控制元素在页面的中的叠加顺序,z-index值高的元素显示在z-index值低的前面。而其中的原因才很少有人去深究,直到自己在实际项目中碰到由于z-index而导致的各种bug时,才会搜索一下解决的办法。但z-index其实是包含着属于自己一套浏览器解析规则的,只要了解了这其中的规则,那么控制页面中的元素便随心所欲了。z-index的使用条件

只对有 position 属性的且值不为static的元素才有效

堆栈上下文

一组具有共同双亲的元素,按照堆栈顺序一起向前或向后移动构成了所谓的堆栈上下文。充分理解堆栈上下文是真正掌握z-index和堆栈顺序工作原理的关键。

堆栈上下文有三种方法可以在一个元素上形成:(针对标准的浏览器,IE系列有点小区别)

当一个元素是文档的根元素时(<html>元素)当一个元素有一个position值而不是static,有一个z-index值而不是auto当一个元素有一个opacity值小于1

前两种形成堆栈上下文的方法具有很大意义并且被广大Web开发者所理解(即使他们不知道这些被叫做什么)。第三种方法(opacity)几乎从来没在w3c说明文档之外被提及过。

示例
span{display: block;width: 50px;height: 50px;position: absolute;}
.red{background-color: red;}
.green{background-color: green;margin: 15px;}
.blue{background-color: blue;margin: 30px;}<div><spanclass="red"></span></div><div><spanclass="green"></span></div><div><spanclass="blue"></span></div>

显示为:

 z-index知识图文详解[多图]图片1

 

当修改css

red{background-color:red;z-index:100;position:relative;}
z-index知识图文详解[多图]图片2