css - z-index 不会在溢出 :hidden/scroll 下使用react

Question

第一次来，多多包涵:)
我已经搜索了无数次答案，但没有找到真正解决我的问题的答案。

我有一个 div 是 overflow-y: scroll; overflow-x: hidden; 嵌套在另一个 div 中。
嵌套的 div 包含其他 div 元素，其图像在悬停时为 transform: scale(2);。
问题是 - 元素不会违反“溢出”定义并被包含的 div 剪切。

它是这样的: Image is cut by div

包含 div CSS:

.CatPnl {
position: relative;
background-color: #8BB2C5;
padding: 8px 5px 0px 0px;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
box-shadow: 2px 1px 4px 1px #053655 inset;}

悬停时调出的内部元素:

.imgItem {
width: 49.6px;
height: 49.6px;
transition: all .2s ease-in-out;
margin: -3px 1px 1px 2px;}

.containdiv:hover> .imgItem {
 transform: scale(2);
z-index:9;
}

我已经在悬停时尝试了 z-index，到目前为止它没有帮助。
任何帮助将不胜感激!

Answer 1

因为容器是定位的 (position: relative;)，所以容器中的所有元素都将基于该上下文进行定位。本质上，相对位置创建了一个层，它的 child 将生活在其中。无论您为 child 应用多高的 z-index，它都不会超出该层的边界。

为了说明，我创建了一个 fiddle 来展示它如何工作，尽管这不是您问题的直接答案。

http://jsfiddle.net/gzywzkep/

我的 fiddle 中的问题是我必须在子节点上使用 position: absolute，所以它将它从上下文中拉出并进入一个新层，这会导致它重叠其他元素。请注意，容器元素没有应用任何 position 属性。

虽然这不是一个完整的答案，但我想分享一下，这样您或许可以根据它制定出一个解决方案。