title: How to bring iframe to front
body: <p>I have a problem with an iframe on a page surrounded by a header and footer.</p>
  
  <p>There is a div in the header which overlaps the iframe ( in blue below ).<br>
  <img src="https://i.stack.imgur.com/YEUiL.png" alt="enter image description here"></p>
  
  <p>The div with id logo looks like this:</p>
  
  <pre><code> #logo {
        z-index: 9998;
        position: absolute;
        top: 10px;
        left: 0px;
    }
  </code></pre>
  
  <p>The white part of the page is an iframe.</p>
  
  <pre><code> &lt;iframe src="somepage" scrolling="auto" class="study-iframe" style="height:700px;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The words "What does a course attribute mean?" are a link.</p>
  
  <pre><code>     &lt;div id="Attr1View1"&gt;
           &lt;p&gt;
           &lt;a href="javascript:Toggle2Views('Attr1View2', 'Attr1View1')"&gt;
           &lt;font class="LinkNoUnderline"&gt;+ &lt;/font&gt;
           &lt;font class="LinkNoUnderlineText"&gt;What does a course attribute mean?&lt;/font&gt;
           &lt;/a&gt;
           &lt;/p&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>When I click on an area which is covered by the blue rectangle, nothing happens.</p>
  
  <p>when I click on an area outside the blue rectangle, the link works.</p>
  
  <p>How can I force the links on this page to the front, so that you can always click on them ?</p>
  
  <p>Thanks</p>