Question

我有一个问题，隐藏的溢出是剪掉绝对定位元素的文本..

以下是示例：

<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元素取自php循环，因为我使用的是滑动旋转木马。所有父级溢出：隐藏元素隐藏了上一个/下一个旋转木马，所以我们不能通过改变结构来玩那么多。

也是Jsfiddle

https://jsfiddle.net/egh5oz9h/

我希望“文本”显示在灰色框上方。所以在隐藏溢出的父元素之外..

Answer 1

将位置绝对更改为固定位置。

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

溢出隐藏div之外的绝对定位元素

1 个答案: