title: How to show a child element on top of parent's sibling overlay
body: <p>I have an issue of z-index stacking on my react component. The codebase has been so complex, and when I tried to do suggestion from <a href="https://stackoverflow.com/questions/24511702/element-on-top-of-parents-sibling">here</a> it doesn't work. The simplified problem maybe like <a href="https://jsfiddle.net/njevg6Lt/2/" rel="nofollow noreferrer">this</a>.</p>
  
  <p>What I am trying to do is simply to make a background overlay when a sidebar menu is opened (by default it's hidden). This sidebar menu is the child of the top navbar. And the div overlay background is the sibling to the top navbar.</p>
  
  <p>Something like this:</p>
  
  <pre><code>&lt;div className="overlay" /&gt;
  &lt;TopNavbar&gt;
    &lt;SideMenuBar&gt;
    &lt;/SideMenuBar&gt;
  &lt;/TopNavbar&gt;
  </code></pre>
  
  <p>TopNavbar has z-index=900. 
  If I set div overlay z-index to 901 and SideMenuBar z-index to 902, the div overlay will still cover all screen. 
  If I set div overlay z-index to 900 it will cover the background, but the TopNavbar will not be covered.</p>
  
  <p>The other question I wonder when I read <a href="https://stackoverflow.com/questions/24511702/element-on-top-of-parents-sibling">here</a> is:
  why is this <a href="http://jsfiddle.net/P3qwx/3/1" rel="nofollow noreferrer">demo</a> works fine while the z-index of span5 is less than span 2, 3, and 4?</p>