绕过溢出：隐藏位置：布局祖先的相对

Question

有一种布局，我无法改变。 它有位置：相对，溢出：隐藏。

并且有一个组件，如果点击一个按钮，它会在它旁边打开一个小窗口。 （组件是布局div的深层子句）

布局属性使窗口看起来被切断。

我能做些什么吗？

（我已经阅读了一些解决方案，但它们需要对布局进行大量更改，并且很多组件会在该布局上进行中继）

Answer 1

您可以使用CSS转换。

.scope {
  transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  position:relative;
  width:100px;
  height:100px;
  background:#ff0000;
  top:100px;
  left:100px;
  margin-bottom: 1000px;
}

.overflow-hidden {
  overflow:hidden;
  width:100%;
  height:100%;
}

.breakout {
  position: fixed;
  top:-50px;
  right:-50px;
}

<div class="scope">
  <div class="overflow-hidden">
    <img class="breakout" src="http://placehold.it/100x100"/>
  </div>
</div>