使用hover功能时悬停元素被其他容器遮挡，该如何解决？

问题根因 #

遮挡问题主要是三个配置错误导致的：

1. 父容器.movie-list-container设置了全局overflow: hidden，会把悬停时纵向超出容器范围的内容直接裁剪
2. 列表项.movie-list-item未开启定位，无法通过z-index控制堆叠层级，悬停放大的元素默认会被后续渲染的同级元素/其他容器覆盖
3. 没有给悬停状态设置更高的层级优先级

修复代码 #

只需要修改对应CSS规则即可：

1. 调整父容器的溢出规则和定位：

.movie-list-container{
    margin-left: 50px;
    margin-top: -16vh;
    height:64vh;
    /* 替换原有overflow:hidden */
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
}
/* 可选：如果是上下排列的多个分类列表互相遮挡，加这条让当前 hover 的容器整体层级更高 */
.movie-list-container:hover{
    z-index: 100;
}

2. 调整列表项的定位和层级：

.movie-list-item{
    margin-top: 40px;
    margin-right: 3px;
    position: relative; /* 开启定位，z-index才会生效 */
    border-radius: 10px;
    transition: z-index 0.2s step-end; /* 避免hover结束时层级回落导致的闪烁 */
}

.movie-list-item:hover{
    background-color: black;
    padding: auto;
    z-index: 999; /* 悬停时提升层级，优先显示 */
}

修改完后悬停时的放大内容就会完整显示在所有元素上层，不会被遮挡。

内容的提问来源于stack exchange，提问作者MatchaLattee