Unexpected z-index of contents in MathJax

Question

I am writing the sketch of a webpage in HTML5/CSS3 and I observed an unexpected behaviour of the contents in MathJax respect to the z-index.

My idea is to have a top div, fixed, with image, name and contacts, and the following contents shown below by scrolling vertically.

As this updated JSFiddle shows, everything seems to work but one thing: the math delimited by MathJax delimiters \( and \) flows above the #top div and the image, not below like the text all around.

The following, with updated z-indexes, should also reproduce the problem on Chrome and Opera (on Windows) and on Chrome and Android Browser (tested on Samsung S3 and S4).

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Name Surname</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Register.StartupHook("MathMenu Ready",function () {
    MathJax.Menu.BGSTYLE["z-index"] = 1;
    });
  </script>
  <script type="application/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<style>
#wrap {
  margin: 0px auto;
  padding: 10px;
  padding-top: 0px;
  width: 920px;
  text-align: left;
  background-color: #fff;
  }

p {
  margin: 0px;
  padding: 0px;
  text-align: left;
}

a {
  text-decoration: none;
  color: #096;
}

.clb {
  clear: both;
}

#top {
  background-color: #eee;
  position: fixed;
  margin: auto;
  margin-top: 0px;
  width: 900px;
  height: 330px;
  padding: 10px;
}

#topl {
  float: left;
  width: 450px;
  height: 310px;
  padding: 10px 0px;
  -webkit-position: relative;
  position: relative;
  -webkit-z-index: 200;
  z-index: 200;
}

#bimg {
  height: 306px;
  width: 306px;
  margin: 0px auto;
  border-radius: 22px;
  border: 3px solid #000;
  -webkit-position: relative;
  position: relative;
  -webkit-z-index: 200;
  z-index: 200;
}

#bimg img {
  height: 300px;
  width: 300px;
  margin: auto;
  border-radius: 20px;
  border: 3px solid #fff;
  -webkit-position: relative;
  position: relative;
  -webkit-z-index: 200;
  z-index: 200;
}

#topr {
  float: right;
  width: 450px;
  height: 310px;
  padding: 10px 0px;
  -webkit-position: relative;
  position: relative;
  -webkit-z-index: 200;
  z-index: 200;
}

#topr h1 {
  margin-top: 50px;
  margin-bottom: 20px;
  font-size: 24pt;
  font-weight: bold;
}

#topr p {
  font-size: 11pt;
  margin-bottom: 9pt;
}

#cont {
  margin: auto;
  margin-top: 0px;
  width: 900px;
  padding: 10px;
  padding-top: 355px;
}

#cont p {
  font-size: 13pt;
  margin-bottom: 10pt;
}
</style>
</head>

<body>
<div id="wrap">
  <div id="top">
    <div id="topl">
      <div id="bimg"><img src="http://matteoallegro.joomlafree.it/kb.png" alt="Image"></div>
    </div>

    <div id="topr">
      <h1>Name Surname</h1>

      <p><a>[email protected]</a></p>
    </div>

    <div class="clb"></div>
  </div>

  <div id="cont">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <p>Elliptic curve \(y^2=x^3-x\) over \(\mathbb{F}_{89}\)</p>
    <p>Elliptic curve \(y^2=x^3-x\) over \(\mathbb{F}_{89}\)</p>
    <p>Elliptic curve \(y^2=x^3-x\) over \(\mathbb{F}_{89}\)</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>  
</div>
</div>
</div>
</body>
</html>

Reference for the first <script> here. I don't know javascript at all but I noticed that in https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML z-index appears two (three?) times, apparently with values of 101 and 102.

Note from the future: cdn.mathjax.org is nearing its end-of-life, check mathjax.org/cdn-shutting-down for migration tips. — Peter Krautzberger

TylerH TylerH · Accepted Answer · 2015-07-21T19:41:19

I don't know of Mathjax, so I don't know what part of the application might be causing this, but you can fix it by adding the following property values to the #bimg selector:

#bimg {
    position: relative;
    z-index: 1;
}

This doesn't break anything based on the code provided in your JSFiddle. This will work in Firefox and IE, but not in Webkit browsers.

Unexpected z-index of contents in MathJax

1 Answers