Angular - Why does the # sign at z-index always appear?

Question

I don't know what is wrong with my code but I have set a z-index in my css like this:

.mat-mini-fab {
 position: absolute;
 right: 5px;
 top: 4px;
 z-index: 999;
 box-shadow: none !important;
}

But whenever I go to my site, the z-index is not applied and when I check in the developer console, there is always a # in front of the value so like this z-index: #999. I don't know where this comes from??

Tested in Chrome and Firefox. I am definitely sure in the code I never set the # before.

When I change this to 1000, there is no #, but below 1000 the # always is there... what kind of bug is this??

enter image description here

• Kinglish: curiously - does this happen even with z-index: 999 !important; ?
• chazsolo: Without more info it looks like your bundler/minifier/linter is detecting 999 as a hex value and trying to format it? How are you bundling your CSS? Where does the [_ngcontent-elm-c129] come from?
• Phix: @chazsolo it comes from angular.
• Haidepzai: z-index: 999 !important; did not help. How can I check my bundler/minifier/linter? I am using a simple Angular project
• Phix: Can you edit your question and post the versions of your Angular deps?

Answer 1

I got this problem after switching to Angular 12. Looks like a problem with the way Webpack bundles. I added the top limit of the z-index, then it did not add the #.

 z-index: 2147483647;