CSS中如何实现图片上下移动及部分溢出隐藏效果？

你的核心问题是容器的溢出控制未生效，同时图片定位没有基于正确的父容器。以下是修正步骤和代码：

问题根源 #

• .next-gen未设置position: relative，导致内部绝对定位元素相对于整个页面定位，而非该section
• .image-content仅设置overflow: hidden但未定义宽高，溢出规则无法生效
• 固定的left: 1000px和right:250px属于硬编码，适配性差

修正后的CSS代码 #

.next-gen{
    padding-left: 10%;
    background-color: hsl(0, 0%, 98%);
    font-family: "Public Sans", sans-serif;
    display: flex;
    height: 450px;
    position: relative; /* 新增：让内部绝对定位元素基于此容器定位 */
    overflow: hidden; /* 可选：隐藏整个section外的溢出内容 */
}
.text-content p{
    padding-top: 10px;
    padding-bottom: 10px;
    color: hsl(233, 8%, 62%);
}
.image-content {
    position: absolute;   
    right: 0; /* 替换固定left值，让容器靠右对齐 */
    top: 0;
    width: 50%; /* 定义容器宽度，可根据需求调整 */
    height: 100%; /* 继承父容器高度，确保溢出规则生效 */
    overflow: hidden; /* 关键：隐藏容器外的图片部分 */
}

.image-1 {
    width: 100%; /* 让背景图填满容器 */
    position: relative;
    top: -50px; /* 向上移动50px，超出容器顶部的部分会被隐藏 */
}

.image-2 {
    position: absolute;
    right: 5%; /* 用百分比替代固定值，适配不同屏幕尺寸 */
    bottom: -120px; /* 向下移动，超出容器底部的部分被隐藏 */
    z-index: 5;
    width: 90%; /* 控制图片宽度，避免溢出容器左右 */
 }

关键说明 #

• 给.next-gen添加position: relative，确保.image-content的绝对定位基于该section，而非整个页面
• 给.image-content设置明确的宽高，overflow: hidden才能对内部图片生效
• 用top/bottom属性调整图片的上下位置，超出容器的部分会自动被隐藏
• 替换固定像素值为百分比，提升页面在不同屏幕下的适配性

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