z-index堆叠上下文 - 子重叠父级带溢出：隐藏？

Question

实现这一目标的最佳方式是什么：

我有两个元素，两者都是绝对定位的，我希望孩子水平重叠，即使它的父元素有溢出-x：hidden。

FIDDLE

.parent {
  position: absolute;
  z-index:1;
  height: 100%;
  min-height: 300px;
  overflow-y:auto;
  overflow-x:hidden;
  width: 200px;
  background: #ccc;
}
.child {
  position:absolute;
  z-index:2;
  width: 300px;
  height: 100px;
  top: 30px;
  left: 10px;
  padding: 10px;
  background: #555;
  color: white
}

Answer 1

添加第三个div，它是两者的父级。将两个项目绝对放在外部父项中。

<div class="outer-parent">
  <div class="parent">
  </div>
  <div class="child">
  </div>
</div>