html5 - Unexpected z-index of contents in MathJax -
i writing sketch of webpage in html5/css3 , observed unexpected behaviour of contents in mathjax respect z-index.
my idea have top div, fixed, image, name , contacts, , following contents shown below scrolling vertically.
as this updated jsfiddle shows, seems work 1 thing: math delimited mathjax delimiters \( , \) flows above #top div , image, not below text around.
the following, updated z-indexes, should reproduce problem on chrome , opera (on windows) , on chrome , android browser (tested on samsung s3 , 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; } { 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@email.com</a></p> </div> <div class="clb"></div> </div> <div id="cont"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>elliptic curve \(y^2=x^3-x\) on \(\mathbb{f}_{89}\)</p> <p>elliptic curve \(y^2=x^3-x\) on \(\mathbb{f}_{89}\)</p> <p>elliptic curve \(y^2=x^3-x\) on \(\mathbb{f}_{89}\)</p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 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 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 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 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 first <script> here. don't know javascript @ noticed in https://cdn.mathjax.org/mathjax/latest/mathjax.js?config=tex-ams-mml_htmlormml z-index appears 2 (three?) times, apparently values of 101 , 102.
i don't know of mathjax, don't know part of application might causing this, can fix adding following property values #bimg selector:
#bimg { position: relative; z-index: 1; } this doesn't break based on code provided in jsfiddle. work in firefox , ie, not in webkit browsers.
Comments
Post a Comment