javascript - Absolute positioned element outside of overflow hidden div - Stack Overflow

admin管理员组

文章数量:1330917

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

/

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

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/egh5oz9h/

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

• javascript
• php
• css
• html

Share Improve this question Follow edited Aug 12, 2016 at 12:47 120382833 asked Aug 12, 2016 at 12:39 120382833120382833 14311 silver badge1010 bronze badges 10

• make this <div style="position: absolute; margin-top: -10px; ">text</div> look like this <div style="position: absolute;">text</div> - that will stop the text being clipped off. or add inside padding to push the text back down – Andrew Commented Aug 12, 2016 at 12:43
• 2 You cannot overe this. That's how the overflow: hidden is intended to work. Read more here. – Krzysztof Zbiciński Commented Aug 12, 2016 at 12:44
• why margin-top:-10px ?? – chirag Commented Aug 12, 2016 at 12:44
• it's unclear exactly what you want to happen. the negative margin and overflow hidden bination are working as they should... how should it change to be what you want? – aw04 Commented Aug 12, 2016 at 12:45
• I would like "text" to be displayed above the grey box.. So outside of the parent elements with overflow hidden.. – 120382833 Commented Aug 12, 2016 at 12:46

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptAbsolute positioned element outside of overflow hidden divStack Overflow