title: How do you pull an item out of an overlay div?
body: <p>I need help. I created a <code>div</code> to overlay the background image. Then I nested another <code>div</code> with children <code>span</code> in it. I'd like to pull out those span selectors on the lines so they're not obscured by their overlay. I've already used <code>z-index</code> property on higher than overlay itself, but still all spans are hidden behind overlay. Maybe one of you can tell me what I'm doing wrong.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.breadcrumbs {
      display: flex;
      justify-content: left;
      height: 100%;
      align-items: center;
      position: relative;
  }
  
  .breadcrumbs span {
      font-size: 1.6rem;
      color: white;
      font-weight: 900;
      font-style: italic;
      letter-spacing: 1px;
      position: absolute;
      z-index: 10000;
  }
  .jumbotron {
      min-height: 550px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      position: relative;
  }
  .overlay {
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;
      background-color: black;
      opacity: 0.66;
      z-index: 10;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="jumbotron" style="background-image: url('...');"&gt;
      &lt;div class="overlay"&gt;
          &lt;div class="breadcrumbs"&gt;
              &lt;span property="itemListElement" typeof="ListItem"&gt;
                  &lt;a property="item" typeof="WebPage" title="..." href="..." class="post-root post post-post"&gt;
                      &lt;span property="name"&gt;News Page&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;meta property="position" content="2"&gt;
            &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>