title: How to have a transparent <div> with a non-transparent <div> overlaying it?
body: <p>I have a simple  on my page with the opacity being set to 0.5. The problem is, the text inside that  is also going transparent. How do I correct that? Do I make another div and place it on top the transparent one? If so, how to do that?</p>
  
  <p>Here is the code I have. The "header" div is position: relative. The others are absolute. The opacity is not showing in IE..</p>
  
  <pre><code>&lt;div id="header"&gt;
              &lt;div id="logindisplay"&gt;
                  &lt;% Html.RenderPartial("LogOnUserControl"); %&gt;
              &lt;/div&gt;
              &lt;div class="transparent" style="background-color:Black; z-index: 0; opacity:0.5; position:absolute;"&gt;&lt;/div&gt;
              &lt;div class="overlay" style="z-index: 1; position:absolute;"&gt;
              &lt;asp:ContentPlaceHolder ID="MainContent" runat="server" /&gt;&lt;/div&gt;
              &lt;div id="footer"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>