title: How can I display this text with z-index?
body: <p>I have <a href="http://jsfiddle.net/fvaFN/1/" rel="nofollow">this</a> code :</p>
  
  <pre><code>&lt;div class="header_photo"&gt;
      &lt;div class="header_inside"&gt;
          &lt;div class="header_text"&gt;
              Text
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="header_photo_transparent"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  
  .header_inside
  {
      top: 0px; 
      left: 0px; 
      display: block; 
      width: 975px; 
      background: none repeat scroll 0% 0% transparent; 
      z-index: 4; 
      position: absolute;
  }
  
  .header_text
  {
      position:absolute;
      bottom:15px;
      width:500px;
      z-index:201;     
      left:370px;
      font-size:12px;
      line-height:13px;
  }
  
  .header_photo_transparent
  {
      position:absolute;
      bottom:0;
      left:0;
      width:960px;
      height:64px;
      background-color: red;
      z-index:100;
  }
  </code></pre>
  
  <p>and I'd like to display the string Text over the red background, without :</p>
  
  <ol>
  <li>changing the z-index of header_photo_transparent;</li>
  <li>without removing position:absolute from header_inside</li>
  </ol>
  
  <p>In fact I don't see the string Text.</p>
  
  <p>Why this behaviour? And how can I fix this trouble?</p>