Angular项目中z-index值小于1000时前为何自动添加#符号？

问题根本原因 #

你在开发者工具里看到的#符号不属于实际的CSS属性值，只是浏览器开发者工具的显示特性：999符合3位十六进制颜色的格式，开发者工具的颜色预览功能会自动在这类值前补#并显示对应颜色的预览标记，仅属于视觉层面的展示效果，和你z-index不生效的问题没有任何关系。

z-index不生效的常见排查方向 #

• 确认堆叠上下文规则：z-index仅能在同一个堆叠上下文内生效，你虽然给当前元素设置了position: absolute，但只要它的任意父级元素设置了overflow: hidden、transform、opacity < 1、filter、will-change等会触发堆叠上下文的属性，当前元素的z-index就只能在该父级内部生效，无法和父级外的元素比拼层级。
• 检查样式优先级：你用的.mat-mini-fab是Angular Material的内置组件类名，官方自带的样式优先级可能高于你自定义的样式，导致z-index被覆盖，可尝试提升选择器优先级（比如写成body .mat-mini-fab）或者临时加!important验证是否是优先级问题。
• 你提到值设为1000就正常，大概率是项目中其他层级的堆叠上下文阈值刚好在999-1000之间，999低于阈值被遮挡，1000超过阈值后正常显示，和#符号完全无关。

验证方法 #

打开开发者工具的「计算样式」面板，查看该元素实际解析的z-index值，这里显示的数值不会带#，如果值和你写的一致，即可完全排除符号的影响，专注排查堆叠上下文即可。

内容的提问来源于stack exchange，提问作者Haidepzai