CSS层级

背景

上个礼拜在做开发的时候，遇到一个坑，在此记录一下这个大坑。 我在写方法的时候，不管怎么写都进入不到这个方法，我起初一直以后是js的问题，在捕获啊，冒泡之类的找问题，但找了大概一天之后，始终找不到问题所在，才在同事的帮助之下，发现了是坑爹的【层级问题】，这个标签被盖住了，压根点不到这个标签。因此我特地整理了一下层级的知识点，望广大开发者各抒己见。

正文

基本概念

z-index属性指定了一个具有【定位属性】（只适用于已经定位的元素，即position：relative/absolute/fixed）的元素及其子代元素的z-order。当元素之间重叠的时候，z-order决定哪一个元素覆盖在其余元素的上方显示。通常来说z-index较大的元素会覆盖较小的一个。

不使用z-index时堆叠顺序

不使用z-index的情况，也就是默认的情况，即所有元素都不用z-index时，堆叠顺序如下（从下到上）

• 根元素（即HTML元素）的background和border
• 正常流中非定位后代元素（这些元素顺序按照HTML文档出现顺序）
• 已定位后代元素（这些元素顺序按照HTML文档出现顺序）

浮动堆叠顺序

浮动元素z-index位置介于非定位元素和定位元素之间（从下到上）

• 根元素（即HTML元素）的background和border
• 正常流中非定位后代元素（这些元素顺序按照HTML文档出现顺序）
• 浮动元素（浮动元素之间是不会出现z-index重叠的）
• 正常流中inline后代元素
• 已定位后代元素（这些元素顺序按照HTML文档出现顺序）

注意点：non-position元素的背景和边界没有被浮动元素影响，但是元素中的内容受影响（浮动布局特性）

z-index

要想改变元素的默认堆叠顺序就要用到z-index。

总结

• z-index只适用于已经定位的元素（即position：relative/absolute/fixed）
• 子元素的z-index值只在父元素范围内有效

转载于:https://my.oschina.net/yardbaby/blog/1973325