title: absolute positioned div over pdf in Safari
body: <p>I'm currently working on a custom jquery menu that occasionally needs to hover over a pdf (embedded within an iframe). It is composed of absolute positioned divs that are shown on click/hover of it's parent.  Pretty simple. </p>
  
  <p>Safari is giving me a headache.  I cannot figure out how to get the menu div to position over the pdf. It is always under. The timeless background iframe approach works great for IE, but fails for Safari (I've got Windows version 5.1.7).  This is a big problem.</p>
  
  <p>I've racked my brain, scoured the web, thought about hiding the pdf, considered retiring, beaten my head against my desk... I'm at a loss!  Somebody's gotta know how to handle this.  </p>
  
  <p>Here's a simplified example that does what I'm talking about. <a href="http://jsfiddle.net/5WPa2/1/" rel="nofollow">http://jsfiddle.net/5WPa2/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="divHover"&gt;try me&lt;/div&gt;
  &lt;div id="divHoverChild"&gt;hello&lt;/div&gt;
  &lt;iframe id="ifBG" src="about:blank"&gt;&lt;/iframe&gt;
  &lt;iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#divHoverChild, #ifBG {
      position: absolute;
      top:25px;
      left: 10px;
      display: none;
      width: 150px;
      height: 300px;
  }
  
  #divHoverChild {
      background: #ccc;
      padding: 25px;
      z-index: 1000;
  }
  
  #ifBG {
      z-index: 1;
      border:none;
  }
  
  #ifPDF {
      width: 400px;
      height: 400px;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$().ready(function () {
      var $child = $("#divHoverChild");
      var $ifBG = $("#ifBG");
  
      $("#divHover").mouseover(function () {
          $child.slideDown();
          $ifBG.slideDown();
      });
  
      $child.mouseout(function () {
          $child.slideUp();
          $ifBG.slideUp();
      });
  });
  </code></pre>