允许绝对定位的子级在父级外渲染溢出：隐藏答案

【问题标题】：Allow absolutely positioned child to render outside parent with overflow: hidden允许绝对定位的子级在父级外渲染溢出：隐藏
【发布时间】：2015-06-11 08:50:32
【问题描述】：

如何允许绝对定位的元素违背其祖先overflow: hidden 并在其外部渲染？由于祖先层次结构中它们之间的元素上存在position: relative，因此情况变得复杂。

这是 pen。在这种情况下，如何允许红色 inner div 以它的全高（300px）呈现，而不是受限于 outermost 父级的 150px。我无法从元素中删除overflow: hidden - 我正在使用它来实现折叠面板。我也不能将 position: relative 移动到 outermost 元素的父元素之一 - 它必须留在 outer 元素。

【问题讨论】：

标签： css layout overflow

【解决方案1】：

从.outermost 中删除overflow:hidden 并使用以下规则在其中创建另一个元素：overflow:hidden; height:100%; width:100%; position:absolute; top:0; left:0; 并将其他所有内容放入其中，它们不会被溢出。

.outermost {
  width: 400px;
  height: 150px;
  background-color: blue;
  position:relative;
}

.outer {
   position: relative;
}

.inner {
  position: absolute;
  left: 100px;
  height: 300px;
  width: 50px;
  background-color: red;
  z-index: 1;
}

.hideOverflow{ /* Put all the content here that's overflowing content you want hidden. And leave content you don't want to hide outside this. */
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

<div class="outermost">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
    <div class="hideOverflow">
      <p>Overflowing content inside this element will be hidden.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis imperdiet nisl, sit amet pretium eros rhoncus nec. Vestibulum viverra semper libero, nec commodo felis lobortis vel. Nam eu erat vel neque viverra iaculis. Mauris condimentum consectetur sem vitae semper. Duis bibendum mollis ex, vitae egestas velit. Nam vitae dolor ornare, vestibulum dui et, sollicitudin est. Duis tristique vehicula dolor et condimentum. Maecenas in tristique dolor. Mauris luctus tincidunt sem. Nulla sit amet tincidunt quam. Aenean quis semper enim. Morbi dolor tellus, porta eu feugiat non, pellentesque ac lacus. Nulla facilisi. Mauris suscipit aliquet egestas.</p>
  </div>
</div>

【讨论】：

我不确定如何，但它可以工作。谢谢你。你能解释一下这里发生了什么吗？
您将所有溢出的内容都需要隐藏在我推崇的新元素中。留在外面的一切都不会被隐藏。如果您需要，我可以添加代码示例。
我现在明白了。感谢 Ilpo 的澄清。