help me decipher "z-index: 2e+09"_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-16 07:10 出处：网络

Inspecting the Typekit \'badge\' (a fixed-position \'bug\' used to promote that service on their free plan) I came across the following:

相关专题：css z-index

Inspecting the Typekit 'badge' (a fixed-position 'bug' used to promote that service on their free plan) I came across the following:

z-index: 2e+09

I'm puzzled by that value - can anyone help me decipher it? Thanks

edit: link to 开发者_Go百科example

2e+09 is a notation for 2x10⁹ (known as scientific notation), or 2,000,000,000. It is actually from SVG (as well as JavaScript), and not technically valid in CSS, ~~but most browsers implement it anyhow, as in all other cases, SVG and CSS numbers match, and they would rather maintain only one parser for numbers, not two.~~

Actually, after checking, I was wrong; the browsers I tried (Chrome, Firefox, Safari and Opera) appear to ignore values set using scientific notation in CSS. So, this actually does nothing at all (it is treated as if z-index were not set at all, for a default z-index of 0), but the intent was probably to position the bug over all other content on the page. There is currently some debate on the CSS standardization mailing list as to whether e-notation should be allowed in CSS; it was mentioned in the discussion that some browsers already support it, but the ones that I tried did not appear to.

You can test for support with the following test case. If scientific notation is supported, then the green div should be on top; if it's not supported, thus defaulting to z-index: 0, it will be on the bottom, and if it parses just the mantissa and not the exponent (which I could imagine certain buggy browsers doing), it would be in the middle.

<!DOCTYPE html><title>Scientific notation test</title>
<style>div { width: 100px; height: 100px; position: absolute; }</style>
<div style="background: red; left: 0px; z-index: 1;"></div>
<div style="background: green; left: 25px; z-index: 2e+09;"></div>
<div style="background: blue; left: 50px; z-index: 2;"></div>

2e+09 is an exponential notation. It means 2 times ten to the ninth power, or 2000000000. They are trying to set the z-index as high as possible.

2e+09 is scientific notation for a very high number; a 2, followed by 9 0's (2,000,000,000)