CSS之z-index问题解析

CSS之z-index问题解析

CSS中一个很常见的属性z-index,在实际的前端代码过程中,我们也可能会经常接触到,但是如果没有仔细的研究过,很可能会让它搞的头大。那么今天就来仔细探究一下CSS中z-index属性的问题。

按照一惯的思维,容易理解成块的层叠顺序完全取决于z-index的大小,所以是dy1<dy2<dy3<dy2-1<dy2-2,dy2-2在所有块的最外层。但结果真是这样的吗?

 层的顺序不单单取决于z-index值的大小
 层叠顺序完全取决于z-index的大小只是在一般情况下才成立,并不是适用于任何情况。从这个例子中,可以得出结论是dy2-1和dy2-2都遵循了其父层dy2的z-index,而他们本身的z-index值只在dy2内部起作用。 

css中z-index的默认值为0,且按代码顺序显示
 经过一些简单的测试我们就可以发现只要不设置z-index,默认的是按照代码里面的先后顺序来展示,代码靠后的层覆盖代码靠前的层,同时所有的未设置z-index的层的初始值都是0。