title: HTML CSS Cannot See Element OpenSeadragon Viewer
body: <p>I am missing something simple I think.  I am using OpenSeadragon viewer (OSD) and would like to insert some floating text over the images.  No matter what I do, the viewer is on top of everything.  I can see the text flash, but then the viewer hides it all.  The HTML with the viewer is:</p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;demoarea&quot;&gt;
          &lt;div id=&quot;toolbarDiv&quot; class=&quot;toolbar&quot;&gt;
              ...
          &lt;/div&gt;
          &lt;div id=&quot;contentDiv&quot; class=&quot;openseadragon&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>I have created a number of tags in an attempt to display text floating over the viewer:</p>
  <pre><code>    #watermark {
          -webkit-transform:rotate(-20deg);
          -moz-transform:rotate(-20deg);
          -o-transform:rotate(-20deg);
          transform:rotate(-20deg);
          font-size:200px;
          color:#CCC;
          font-weight:bold;
          letter-spacing:40px;
          position:absolute; 
          z-index:1000000; 
          top:20%;
          left:15%;   
          opacity:0.5; 
          filter:alpha(opacity=50);
      }
      
      .watermark {
          -webkit-transform:rotate(-20deg);
          -moz-transform:rotate(-20deg);
          -o-transform:rotate(-20deg);
          transform:rotate(-20deg);
          font-size:200px;
          color:#CCC;
          font-weight:bold;
          letter-spacing:40px;
          position:absolute; 
          z-index:1000000; 
          top:20%;
          left:15%;   
          opacity:0.5; 
          filter:alpha(opacity=50);
      }
  &lt;p&gt;Top&lt;/p&gt;
  &lt;div id=&quot;watermark&quot; style=&quot;display:block;&quot;&gt;Top&lt;/div&gt;
  &lt;h1&gt;Top&lt;/h1&gt;
  &lt;div id=&quot;watermark&quot; class=&quot;watermark&quot;&gt;
      Top
      &lt;span&gt;Top&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I have tried to make the text as obnoxious as I can so that if it flashes quickly, I can still see it.  This is exactly what is happening.  Multiple instances of the &quot;Top&quot; text is visible for a split second and then is covered up by the viewer.</p>
  <p>When I look at the CSS elements of the viewer, the z-index of the fullpage class is 999999.  I set my CSS z-index to 1000000 so it should be on top, but it isn't.</p>
  <p>Anyone have other ideas?</p>
  <p>Thanks.</p>
  <p><a href="https://i.stack.imgur.com/NGJ3q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NGJ3q.png" alt="This is the viewer with all the Top text messages." /></a></p>