absolute定位子div未完全隐藏问题：transform隐藏失效解决方法

问题根源：你当前对中间元素使用transform: translate(-50%, -100%)时，由于浏览器渲染精度或像素对齐的细微问题，可能导致极少量元素区域残留在父容器可视范围内，从而出现无法完全隐藏的情况。

这里提供两种可靠的解决方法：

方法一：微调transform偏移量（快速修复） #

将中间元素的初始transform属性修改为translate(-50%, -100.1%)，通过微小的额外偏移量确保元素彻底脱离父容器的可视区域：

.overlay:nth-child(2){
    /* 其他属性不变 */
    transform: translate(-50%, -100.1%);
}

方法二：改用top属性控制垂直位置（更稳妥） #

放弃使用transform控制垂直隐藏，改用top: -100%将元素直接移出父容器上边界，transform仅用于实现水平居中，hover时恢复top为0。这种方式完全基于父容器尺寸计算，不会出现渲染残留问题：

修改后的完整CSS代码 #

.box {
    width: 350px;
    height: 350px;
    position: relative;
    background: antiquewhite;
    overflow: hidden;
}
.overlay:first-child{
    position: absolute;
    width: 33.34%;
    height: 100%;
    left: 0;
    top: 0;
    background: rebeccapurple;
    transform: translateY(100%);
    transition: transform 1s;
}
.overlay:nth-child(2){
    position: absolute;
    width: 33.3333333%;
    height: 100%;
    left: 50%;
    top: -100%;
    transform: translateX(-50%);
    background: firebrick;
    transition: top 1s;
}
.overlay:last-child{
    position: absolute;
    width: 33.34%;
    height: 100%;
    right: 0;
    top: 0;
    background: green;
    transform: translateY(100%);
    transition: transform 1s;
}
.box:hover .overlay:not(:nth-child(2)){
    transform: translateY(0);
}
.box:hover .overlay:nth-child(2){
    top: 0;
}

这种方案的优势在于，top: -100%是基于父元素的高度进行定位，直接将元素完全移出父容器范围，避免了transform基于自身尺寸计算可能带来的渲染误差，同时过渡效果保持流畅。

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