Home/ Questions/Q 1064391
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T18:56:02+00:00

Inspecting the Typekit ‘badge’ (a fixed-position ‘bug’ used to promote that service on their

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    2e+09 is a notation for 2×109 (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>
    • 0