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

【问题标题】：Absolute positioned element outside of overflow hidden div溢出隐藏div之外的绝对定位元素
【发布时间】：2016-08-12 12:39:07
【问题描述】：

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

示例如下：

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

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

【问题讨论】：

使<div style="position: absolute; margin-top: -10px; ">text</div> 看起来像<div style="position: absolute;">text</div> - 这将阻止文本被剪掉。或添加内部填充以将文本向下推
你无法克服这一点。这就是overflow: hidden 的工作方式。 Read more here.
为什么 margin-top:-10px ??
目前还不清楚您想要发生什么。负边距和溢出隐藏组合正在正常工作......它应该如何更改为您想要的？
我希望“文本”显示在灰色框上方。所以在隐藏溢出的父元素之外..

标签： javascript php css html

【解决方案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

【讨论】：

工作.. 非常感谢！！