title: How can I make an element overlap elements in higher stacking contexts?
body: <p>In this <a href="https://mdn.mozillademos.org/files/790/understanding_zindex_04.png" rel="noreferrer">example</a>, is there any way to make Div #4, Div #5, and Div #6 higher than Div #1? I've read that z-index only applies to elements <em>within</em> the same stacking context. So here, Div 4,5, and 6 are within the stacking context of Div #3.</p>
  
  <p>In another example, as shown <a href="http://codepen.io/chriscoyier/pen/lgFiq" rel="noreferrer">here</a>, and change the <strong>main div</strong> left property to something like 10%, the child element is being overlapped by the body element.</p>
  
  <pre><code>main div {
    background: black;
    color: white;
    width: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 10%;
    padding: 20px;
    resize: both;
    overflow: auto;
  }
  </code></pre>
  
  <p>Is there any way for them to overlap other elements in 'higher' stacking contexts?</p>