title: z-index not working as expected (Chrome and Opera)
body: <p>I have a div with class "opaque" and another with class "product-info", which are both on the same level.</p>
  
  <p>The code is as follows:</p>
  
  <pre><code>&lt;div class="opaque"&gt;&lt;/div&gt;
  &lt;div class="product-info"&gt;
      &lt;img class="product-image" src="/Images/D3.jpg" /&gt;
      fsdfdsfsdfs
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.opaque 
  {
      background-color: White;
  -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  }
  
  .product-info 
  {
  padding: 5px;
  text-align: center;
  z-index: 2;
  }
  </code></pre>
  
  <p>Note that product-info is set to z-index 2 and opaque has z-index 1. Therefore product-info should be displayed over opaque so should not be faded. However the image within product-info (and text) is faded. This happens in both Chrome and Opera, therefore I expect this is what should be happening since they are not IE!</p>
  
  <p>There are lots of bits of HTML code as shown above, each nested in lis which are set to float left with width of 33%. When the page is fully loaded (<code>$(window).load()</code>) I use jQuery to detect the maximum height of all the products and apply that height to all the rest. I have tried removing all the jQuery in case this is affecting the z-index, but I get the same result only with an untidy look and feel.</p>
  
  <p>I have tried using Google Chromes Inspect Element tool and the elements in question are showing the correct characteristics.</p>
  
  <p>Can anyone see what I am doing wrong here? I have been trying to solve this for a couple of days now and would like to find out what is going on.</p>
  
  <p>Thank you.</p>
  
  <p>Regards,</p>
  
  <p>Richard</p>
  
  <p>Full code as requested:</p>
  
  <p>I think this is all that is required. I will create a page with just this code in a few minutes, to see if it reproduces the problem.</p>
  
  <pre><code>&lt;div id="BodyTag_ContentPanel"&gt;
      &lt;div class="overlay-background"&gt;&lt;/div&gt;
      &lt;div class="scroll-pane"&gt;
          &lt;div&gt;
              &lt;ul class="product-list"&gt;
                  &lt;li class="product"&gt;
                      &lt;div class="spacer"&gt;
                          &lt;div class="opaque"&gt;&lt;/div&gt;
                          &lt;div class="product-info"&gt;
                              &lt;img class="product-image" src="/Images/D3.jpg" /&gt;
                              &lt;div class="enlarge"&gt;
                                  &lt;div class="image-enlargement"&gt;
                                      &lt;span class="close"&gt;&lt;img src="/Images/close.jpg" /&gt;&lt;/span&gt;
                                      &lt;div class="enlargement"&gt;
                                          &lt;div class="image-container"&gt;&lt;img src="/Images/D3.jpg" /&gt;&lt;/div&gt;
                                          &lt;div class="product-code"&gt;&lt;span class="text-container"&gt;D3&lt;/span&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="product-code"&gt;D3&lt;/div&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.product-list 
  {
      list-style: none;
      padding: 0;
      width: 100%;
  }
  
  .product 
  {
      width: 33%;
      height: 25%;
      float: left;
      position: relative;
  }
  
  .product .spacer 
  {
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      margin: 10px;
      padding: 5px;
      border: 4px solid #C47F50;
      position: relative;
  }
  
  .product .opaque 
  {
      background-color: White;
      -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 1;
  }
  
  .product .product-info 
  {
      padding: 5px;
      text-align: center;
      z-index: 2;
  }
  
  .product .product-info .product-image 
  {
      max-width: 200px;
      max-height: 200px;
      min-width: 150px;
      min-height: 150px;
      z-index: 2;
  }
  
  .product .product-code 
  {
      position: absolute;
      bottom: -15px;
      width: 50%;
      margin-left: auto;
      margin-right: auto;
      background-color: White;
      text-align: center;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      border: 4px solid #C47F50;
      line-height: 20px;
      z-index: 2;
  }
  
  .product .image-enlargement 
  {
      position: fixed;
      display: none;
      padding: 5px;
      background-color: White;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      border: 4px solid #C47F50;
      z-index: 103;
  }
  
  .product .enlarge
  {
      float: right;
  }
  </code></pre>