你真的了解CSS属性z-index吗

我们都知道，z-index属性规定了定位元素的层叠顺序，其值越大越层级越高，其值也允许被设为负值，z-index属性让元素有了z轴的特征，让元素有了远近之分。

除了这个特征之外，还有一个比较重要的特征：z-index会受到html结构的影响：
举个例子，a,b为父子元素关系，如果a是定位元素且设置了z-index为10，b也是一个定位元素并设置z-index为1000，你可能会认为b的层级会高于a，但是此时的实际结果是b的z轴定位不会超过a的的z轴定位，b的值设置的再大也不会超过父级元素的值10。总而言之这个特性可以总结为：

在父子元素都为定位元素的情况下，子元素的z轴定位不会高于父级元素

Html的结构分割了z-index的结果，z-index只在当前结构下才会有高低之分，一旦出了当前结构，比如超过父级去和父级的兄弟元素比较，是完全没有效果的。就好比两个完全不同的世界，是彼此分割而不互通的。

在有些比较复杂的页面布局中，有很大概率碰到这种情况。所以，掌握好这个特征可以帮你更好的布局页面元素。