允许绝对定位的 child 在 parent 之外渲染并溢出：隐藏

Question

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

这里有一个pen。在这种情况下，如何让红色 inner div 以全高（300px）渲染，而不是被 outermost parent的150px。我无法从元素中删除 overflow: hidden - 我正在使用它来实现折叠面板。我也无法将 position: relative 移动到 outermost 元素之一的 parents - 它必须留在 outer 元素。

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

允许绝对定位的 child 在 parent 之外渲染并溢出：隐藏

Allow absolutely positioned child to render outside parent with overflow: hidden

css

layout

overflow