画像の上に表示されるテキストは、Z-インデックスなしで動作します。なぜですか？

Question

私は画像の上に（画像を含むDIVの）一番下に並んだ字幕テキストを表示したいと思います。

私はZ-Indexを使う必要があると思っていましたが、なんらかの理由でそれがなくても動作します。私は本当に理由を理解したいと思います。ここで

はHTMLです：

<div class="latest-item"> 
      <img src="images/latest-image-placeholder.png" alt="latest-image-placeholder"/> 
      <div class="latest-item-copy">Bad schools, flawed justice create crime. Test Bad schools, flawed justice create crime. Test </div> 
     </div> 

そしてここでは、対応するCSSです：

.latest-item { 
      height: 130px; 
      background-color: fuchsia; 
      margin-bottom: 20px; 
      overflow: hidden; 
      position: relative; 
      } 

.latest-item-copy { 
       width: 220px; 
       /* Fallback for web browsers that doesn't support RGBa */ 
       background: rgb(0, 0, 0); 
       /* RGBa with 0.6 opacity */ 
       background: rgba(0, 0, 0, 0.6); 
       bottom: 0px; 
       position: absolute; 
       padding-left: 5px; 
       padding-right: 15px; 
       padding-top: 2px; 
       padding-bottom: 4px; 
       box-sizing:border-box; 
       -moz-box-sizing:border-box; /* Firefox */ 
       -webkit-box-sizing:border-box; /* Safari */ 
       font-family: Georgia, Times New Roman, serif; 
       font-size: 14px; 
       line-height: 18px; 
       color: #F1F1F1; 
       font-weight: bold; 
       } 

そして、ここではそれが出力するものです：あなたは絶対にアイテムを配置する場合http://i.stack.imgur.com/Hdl9l.png

Answer 1

、その要素を引っ張りますドキュメントフローの外に出ます。これは、要素を浮動させるときと同じことです。それらは自動的に、より高いZインデックスを持つ別の「レイヤー」に配置されます。

Answer 2

使用しているのでposition: absolute