<!doctype html>
<html>
  <head>
    <title>display</title>
    <meta charset="utf-8"/>
  </head>
  <body>

    <!-- This only draws the <div> elements since the math element should be
         hidden by the red boxes. -->
    <div style="height: 3em; width: 10em;">
      <div style="position: absolute; left: 0; width: 10em; height: 3em;
                  background: blue;">
      </div>
      <div style="position: absolute; left: 0; width: 2em; height: 3em;
                background: red;">
      </div>
    </div>

    <!-- This only draws the <div> elements since the math element should be
         hidden by the red boxes. -->
    <div style="height: 3em; width: 10em;">
      <div style="position: absolute; left: 0; width: 10em; height: 3em;
                  background: blue; padding: 1px;">
      </div>
      <div style="position: absolute; left: 4em; width: 2em; height: 3em;
                background: red;">
      </div>
    </div>

    <!-- This only draws the black <div> covering the math element. -->
    <div style="height: 3em; width: 10em;">
      <div style="position: absolute; left: 0; width: 10em;
                  background: black;">
        <span style="font-size: 1.5em;">X</span>
      </div>
    </div>

    <!-- This only draws the black <div> covering the math element. -->
    <div style="height: 5em; width: 10em;">
      <div style="position: absolute; left: 0; width: 10em;">
        <div style="position: absolute; left: 0; top: 2em;
                    width: 10em; background: black;">
          <span style="font-size: 1.5em;">X</span>
        </div>
      </div>
    </div>

  </body>
</html>
