深入了解z-index的用法

发布网友发布时间：2024-10-22 16:01

共1个回答

热心网友时间：2024-10-30 10:48

1）z-index的取值包括：关键字auto、任意整数（包括正数、负数、0）、通用取值inherit、initial、unset。

2）z-index的作用：默认值是auto，表示box不建立新的局部堆叠上下文，其生成的box在当前堆叠上下文中的堆叠层次与父box相同。当z-index取数值时，有两个作用：①在当前元素建立一个堆叠上下文；②告诉浏览器当前元素在这个堆叠上下文中的位置。

3）z-index的使用：只有position为relative/absolute/fixed的元素，z-index属性才起作用。z-index遵循从父原则，即如果父元素和子元素同时设置了z-index，以父元素的z-index为准。

4）堆叠上下文的理解：想象网页页面所在的空间是一个三维空间，垂直显示屏方向为Z轴，新的堆叠上下文是在z轴方向上又生出一个平面，其在z轴上的坐标位置由z-index属性指定。

文档中的元素如何确定先后层叠水平，以下解释可以说明：在每一个堆叠上下文中，以下层按照从后到前的顺序绘制：1.形成堆叠上下文的元素背景和边框；2.具有负堆叠层次的子堆叠上下文（最负先）；3.内联流、非内联级、非定位后裔；4.非定位浮动；5.内联流、内联级、非定位后裔，包括内联表格和内联块；6.堆叠层次为0的子堆叠上下文和堆叠层次为0的定位后裔；7.堆叠层次为正的子堆叠上下文（最小正先）。

5）如何产生新的堆叠上下文：当元素的position为非static且z-index不是auto时；当opacity的值小于1时；对于一些与3d有关的属性，比如perspective：preserve-3d、transform的属性不为none；position：fixed；根元素html。