Question

如何允许绝对定位的元素不服从它的祖先overflow: hidden并在其外部渲染？由于祖先层次结构中它们之间存在position: relative这一事实，情况变得复杂。

这是 pen 。在这种情况下，如何允许红色内部 div渲染它的全高（300px），而不是受最外层父级150px的限制。我无法从元素中删除overflow: hidden - 我正在使用它来实现折叠面板。我也无法将position: relative移动到最外层元素的父母之一 - 它必须保留在外部元素。

Answer 1

从var buttonChoice = []; for (var i = 0; i < 5; i++) { var randomButtonIndex = Math.floor(Math.random() * (5 - i)); buttonChoice = baseChoiceList.splice(randomButtonIndex,1); }移除overflow:hidden并使用以下规则在其中创建另一个元素：.outermost并将其他内容放入其中，它们不会溢出。

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;
}

允许绝对定位的子项使用overflow：hidden呈现父项外部

1 个答案: