title: How do you place child in front of a parents sibling with higher z-index?
body: <p>How do you place child in front of a parents sibling with higher z-index?</p>
  
  <p>I want the pink box to apear in front of the green.</p>
  
  <p><a href="http://jsfiddle.net/Tim86/YRTxt/" rel="nofollow noreferrer">http://jsfiddle.net/Tim86/YRTxt/</a></p>
  
  <p><img src="https://i.stack.imgur.com/J4Ocm.png" alt="example"></p>
  
  <pre><code>&lt;style&gt;
  #wrapper{
      position:relative;
      width:400px;
  }
  #red, #green{
      height:200px;
      width:400px;
  }
  #red{
      background-color:red;
      position:relative;
      z-index:10;
  }
  #pink{
      background-color:pink;
      height:250px;
      width:150px;
      top:50px;
      right:20px;
      position:absolute;
      z-index:40;
  }
  #green{
      opacity:0.8;
      background-color:green;
      position:relative;
      z-index:20;
      top:-50px;
  }
  &lt;/style&gt;
  
  &lt;div id="wrapper"&gt;
      &lt;div id="red"&gt;
          &lt;div id="pink"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="green"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  ​
  </code></pre>