Absolute positioned element outside of overflow hidden div

Question

I have a problem that overflow hidden is clipping away the text of an absolute positioned element..

Here is the example:

<div style="display: flex; overflow: hidden;">
  <div class="swiper-container" style="flex: 1; overflow: hidden;">
    <div class="wrapper" style="position: relative;">
      <div class="swiper-slide">
        <div style="position: absolute; margin-top: -10px; ">text</div>
      </div>
    </div>
  </div>
</div>

.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.

Also Jsfiddle

https://jsfiddle.net/egh5oz9h/

I would like "text" to be displayed above the grey box.. So outside of the parent elements with overflow hidden..

Answer 1

Change position absolute to position fixed.

HTML

<div style="display: flex; overflow: hidden;">
  <div class="swiper-container" style="flex: 1; overflow: hidden;">
    <div class="wrapper" style="position: relative;">

      <div class="swiper-slide">
        <div style="position: fixed; margin-top: -10px;">text</div>
      </div>

    </div>
  </div>
</div>

CSS

.swiper-slide {
  background: #999;
  width: 50px;
  height: 50px;
  display: block;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
}

Codepen