title: Absolute positioned element outside of overflow hidden div
body: <p>I have a problem that overflow hidden is clipping away the text of an absolute positioned element..</p>
  
  <p>Here is the example:</p>
  
  <pre><code>&lt;div style="display: flex; overflow: hidden;"&gt;
    &lt;div class="swiper-container" style="flex: 1; overflow: hidden;"&gt;
      &lt;div class="wrapper" style="position: relative;"&gt;
        &lt;div class="swiper-slide"&gt;
          &lt;div style="position: absolute; margin-top: -10px; "&gt;text&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.swiper-slide element is taken from a php loop since I am using a swipe carousel. Also all parent overflow:hidden elements are hiding previous/next carousels so we can't play that much with changing the structure.</p>
  
  <p>Also Jsfiddle</p>
  
  <p><a href="https://jsfiddle.net/egh5oz9h/" rel="nofollow">https://jsfiddle.net/egh5oz9h/</a></p>
  
  <p>I would like "text" to be displayed above the grey box.. So outside of the parent elements with overflow hidden..</p>