Question

第一次来这里，忍受我:) 我已经多次搜索过答案，但我发现的任何事情都没有解决我的问题。

我有一个overflow-y: scroll; overflow-x: hidden;嵌套在另一个div中的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;），所以其中的所有元素都将根据该上下文定位。从本质上讲，位置相对是创建一个孩子将生活在其中的层。无论你应用于某个孩子的z索引有多高，它都不会超出该层的范围。

为了说明这一点，我创建了一个小提琴，显示可以如何工作，尽管这不是你问题的直接答案。

http://jsfiddle.net/gzywzkep/

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

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

z-index不会在溢出下反应：隐藏/滚动

1 个答案: