title: why is z-index not working for opacity?
body: <p>I have two divs, on the outer div I have given an opacity of .1, and then I have an inner div that should not inherit the parent containers opacity property. But to avoid this what I did was to add a z -index property (higher to the child element) but it doesnt work. How do I avoid child div to inherit the opacity property of its parent container:</p>
  
  <pre><code>&lt;!DOCTYPE HTMl&gt;
  &lt;html&gt;
      &lt;head&gt;  
          &lt;style type="text/css"&gt;
              #outer{width:500px;height:400px;background:#000000;border:1px solid red;opacity:.1;z-index:1}
              #inner{width:450px;height:350px;background:#ffffff;margin: 0 auto;margin-top:20px;z-index:2}
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="outer"&gt;
              &lt;div id="inner"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>