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 example
A:
2,000,000,000 or two billion, which is also 2 X 10^9 as that is scientific notation there.
JB King
2010-09-17 02:41:52
A:
2e+09 is scientific notation for a very high number; a 2, followed by 9 0's (2,000,000,000)
Andrew Barber
2010-09-17 02:42:02
+2
A:
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.
Ned Batchelder
2010-09-17 02:42:03
A:
It basically mean a very large value (2,000,000,000). The designer probably wrote this to ensure that nothing get drawn over that element.
Pierre-Alain Vigeant
2010-09-17 02:43:16
+6
A:
2e+09 is a notation for 2x109 (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>
Brian Campbell
2010-09-17 02:51:31