我们都知道,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只在当前结构下才会有高低之分,一旦出了当前结构,比如超过父级去和父级的兄弟元素比较,是完全没有效果的。就好比两个完全不同的世界,是彼此分割而不互通的。
在有些比较复杂的页面布局中,有很大概率碰到这种情况。所以,掌握好这个特征可以帮你更好的布局页面元素。