title: Easy z-index challenge: making a sibling disappear behind another sibling?
body: <p>This is what I want it to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/rVN1W.png" alt="enter image description here"></p>
  
  <p>everything that is inside the red div, must go behind the green div.
  The html:</p>
  
  <pre><code>&lt;div style="height: 100px"&gt;some text blablablablablablabla
      &lt;br/&gt;some text blablablablablablabla
      &lt;br/&gt;some text
      &lt;br/&gt;some text
      &lt;br/&gt;some text
      &lt;br/&gt;some text
      &lt;br/&gt;some text
      &lt;br/&gt;
  &lt;/div&gt;
  &lt;nav class="navigation"&gt;
      &lt;div class="navfake"&gt;&lt;/div&gt;
      &lt;div class="singleelement"&gt;
          &lt;div class="container"&gt;
              &lt;div class="title"&gt;Some Title1&lt;/div&gt;
              &lt;div class="titlepicture"&gt;some picture&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="singleelement"&gt;
          &lt;div class="container"&gt;
              &lt;div class="title"&gt;Some Title2&lt;/div&gt;
              &lt;div class="titlepicture"&gt;some picture&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The CSS so far and sadly not working:</p>
  
  <pre><code>nav {
      width: 100%;
      height: 60px;
      position: relative;
  }
  .navfake {
      width: 100%;
      height: 100%;
      background: green;
      z-index: 10;
  }
  .singleelement {
      display: inline-block;
      width: 100px;
      height: 60px;
      text-align: center;
      z-index: 0;
  }
  .container {
      position: absolute;
      top: 0px;
       -webkit-transition: all .8s ease;
          -moz-transition: all .8s ease;
          -ms-transition: all .8s ease;
          -o-transition: all .8s ease;
          transition: all .8s ease;
      height: 200px;
  }
  .titlepicture {
      width: 100%;
      height: 200px;
      background-color: red;
  
  }
  
  
  .singleelement:hover .container {
      top: -80px;
  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hL5gW/3/" rel="nofollow noreferrer">enter link description here</a></p>