title: Text on top of image works without Z-index, why?
body: <p>I want to display a subtitle text, running over the top of an image, aligned to the bottom (of the DIV containing the image).</p>
  
  <p>I was expecting I'd need to use Z-Index but for some reason it works without. I'd really like to understand why.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="latest-item"&gt;
              &lt;img src="images/latest-image-placeholder.png" alt="latest-image-placeholder"/&gt;
              &lt;div class="latest-item-copy"&gt;Bad schools, flawed justice create crime. Test Bad schools, flawed justice create crime. Test &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And here's the corresponding CSS:</p>
  
  <pre><code>.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;
                  }
  </code></pre>
  
  <p>And here's what it outputs: <a href="http://i.stack.imgur.com/Hdl9l.png" rel="nofollow">http://i.stack.imgur.com/Hdl9l.png</a></p>