title: css absolute positioning different on FF/chrome between windows and mac
body: <p>I am using the following test. In firefox/chrome/safari on my mac, panel1 renders above panel2. But on firefox/chrome on my windows machine, it renders underneath. </p>
  
  <p>I want panel1 to be placed directly over panel2. What's the right way to do it?:</p>
  
  <p></p>
  
  <pre><code>&lt;html&gt;
  
      &lt;head&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;!-- Appears on top of panel2 in safari/chrome/ff on mac, but underneath on windows. --&gt;
          &lt;div id='panel1' style='z-index:6; position:absolute; width:100px; height:100px; background-color:red'&gt;
          &lt;/div&gt;
  
          &lt;div id='panel2' style='z-index:3; width:100px; height:100px; background-color:yellow'&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I was shown this trick in a previous question. I can't set the top/left position of panel1 (I think) because it's in a larger nest of divs that will move around the screen as the user resizes their browser frame.</p>
  
  <p>Thanks</p>
  
  <p>----------- Update -------------</p>
  
  <p>Tried to explicitly set z-index on both divs, that worked.</p>