title: How can an element positioned behind its parent but still in front of its grandparent?
body: <p>I have three elements stacked into each other. Now I want the innermost element to be placed behind its parent but still in front of its grandparent. I tried different variations on z-index settings, but had no succcess.</p>
  
  <p>The code that shoul work as my understanding of z-index is:</p>
  
  <pre><code>&lt;div style="width: 400px; height: 400px; background-color: purple; position: relative; z-index: 1;"&gt;
      &lt;div style="width: 200px; height: 200px; background-color: blue; position: relative; z-index: 1;"&gt;
          &lt;div style="width: 100px; height: 100px; background-color: green; position: relative; z-index: -1;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Except that it does not.</p>
  
  <p>Any solution?</p>