title: Css transform + z-index issue
body: <p>Yet another question about it, but I haven't found exactly the same problem on SO.</p>
  
  <p>So I try to keep the z-index position of a child of the translated element.
  See the issue here: <a href="http://codepen.io/anon/pen/XjvLoW?editors=0100" rel="nofollow noreferrer">http://codepen.io/anon/pen/XjvLoW?editors=0100</a>.</p>
  
  <p>If you comment the line <code>transform: translateX(30%);</code> from div the z-index will work again.</p>
  
  <p>So far I have tried to <code>translate3d()</code> to force re-rendering or opposite <code>transform-style: flat;</code> and many other stuff with no luck.</p>
  
  <p>I know I can fix issue by translating the <code>p</code> element inside (instead of parent), but in my real complex context I can't.
  Can someone give me a good tip?</p>
  
  <p>Thank you for your help!</p>
  
  <p><strong>[EDIT]</strong></p>
  
  <p>I cannot set z-index on <code>div</code> element, it is not what I want since this div contains other elements that I want to be behind the <code>:before</code> background. </p>
  
  <p>In the context of a sliding pane pushing content from left. I try to have only the pane above the overlay. not the right side content it also contains.</p>
  
  <p>Here I have updated the codepen to better reflect my issue: <a href="http://codepen.io/anon/pen/BQBBoy?editors=0100" rel="nofollow noreferrer">http://codepen.io/anon/pen/BQBBoy?editors=0100</a></p>