title: floating a moving div inside another div, overflow hidden, css fix?
body: <p>I have a div of an aeroplane inside parent div with <code>overflow: hidden</code>, so it looks as though the aeroplane div is flying from under an element on the page and dragging a banner with it.</p>
  
  <p>See my diagram here:</p>
  
  <p><img src="https://i.stack.imgur.com/veJj0.jpg" alt="Diagram"></p>
  
  <p>The css code I have already is:</p>
  
  <pre><code>#plane{
  width: 195px;
  background-image: url(images/plane.png);
  background-repeat: no-repeat;
  height: 444px;
  float: left;
  position: relative;
  top: 0px;
  left: 0px;
  }
  #plane-holder {
  height: 569px;
  width: 960px;
  overflow: hidden;
  z-index: 2200;
  display: inherit;
  }
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Netball Plane&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;&lt;div id="topbar"&gt;&lt;img src="images/contact-us-bar.gif" width="960" height="45" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;&lt;div id="mainbody"&gt;&lt;div id="menubar"&gt;&lt;div id="logo"&gt;&lt;img     src="images/logo.gif" width="284" height="103" /&gt;&lt;/div&gt;
  &lt;div class="menu"&gt;
  Menu to go here
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;div id="hero"&gt;&lt;div id="information-that"&gt;&lt;h1&gt;Hello welcome to the site&lt;/h1&gt;
  &lt;p&gt;&lt;/p&gt;&lt;p&gt;Some more text here.&lt;/p&gt;
  &lt;p&gt;&lt;img src="images/netball.png" alt="Rollover the netball for more information"     width="187" height="46" border="0" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;div id="hero-shadow"&gt;&lt;/div&gt;&lt;script type="text/javascript"&gt;
         $(function(){
      var iCounter = 1;
      var iMaxCounter = 4;
  
          $( '#plane' ).animate({ 
              top: "-=450px",
              left: "+=857px"
          }, 30000, function(){
          }       
          ); 
      $('.slideshow').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        after:onAfter
      });
  
  });
          &lt;/script&gt;
  &lt;div id="plane-holder"&gt;&lt;div id="plane"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;div id="base-content"&gt;&lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but this is displaying as a block pushing the other elements below these divs down the page.</p>
  
  <p>Do you know of a way to fix this so the plane and it's containing div is floating above my site? I've tried setting the z-index, but that doesn't seem to work.</p>