title: z-index vs <object> : is there any reason why this doesnt work on majors browser? (except Firefox)
body: <p>I have <a href="http://jsfiddle.net/3eDSR/2/" rel="nofollow noreferrer">this</a> code :</p>
  <h1>HTML</h1>
  <pre><code>&lt;div class=&quot;box_video&quot;&gt;
      &lt;object width=&quot;330&quot; height=&quot;290&quot; type=&quot;application/x-shockwave-flash&quot; data=&quot;http://www.youtube.com/v/KEkR1ox_K10?version=3&amp;amp;f=user_uploads&amp;amp;app=youtube_gdata&amp;amp;rel=1&amp;amp;border=0&amp;amp;fs=1&amp;amp;autoplay=0&quot; style=&quot;visibility: visible;&quot;&gt;&lt;param name=&quot;allowfullscreen&quot; value=&quot;true&quot; /&gt;&lt;/object&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;box_fixed&quot;&gt;
      My Text
  &lt;/div&gt;
  </code></pre>
  <h1>CSS</h1>
  <pre><code>.box_video 
  {
      z-index: 20;
      height=400;
      background-color: #FF0000;   
      position:relative; 
  }
  
  .box_fixed {
      background-color: #2C2C2C;
      bottom: 400px;
      position: fixed;
      width: 100%;
      z-index: 40;
  }
  </code></pre>
  <p>now, what I'd like to aspect is that the <code>fixed</code> div should be <code>over</code> the video (z-index of <code>box_fixed</code> is higher than <code>box_video</code>).</p>
  <p>But in fact (expect Firefox) on IE/Chrome (for example) it is under.</p>
  <p>Where am I wrong? Is there any special <code>&lt;object&gt;</code> attribute to care about?</p>