Html 如何防止图像溢出到div中？

我寻求实现以下功能： 三张图片从页面向右滑出，在过程中淡出而不溢出，另外三张图片滑入以取代它们的位置

框架JFiddle：（在“正确结果”设置中查看）

动画效果很好；问题是，尽管“主”分区中有“溢出：隐藏”，但传入图像仍显示在“左”分区中。我希望图像显示仅限于它们所在的分区

谢谢你的帮助

---

HTML

<div class="row">
    <div class="left">
    Stuff
    </div>

    <div class="main">
    <!-- several <img> and a <button>-->
    </div>
</div>

JScript

function Btn(){
  document.getElementById('bx1').classList.add('outward'); 
  ... 
  document.getElementById('bx4').classList.add('inward'); 
  ...
  document.getElementById('bx0').removeAttribute('style');}

  /* 'outward' & 'inward' = CSS animations */

---

我现在无法发表评论，所以我将尝试提供一个答案

由于图像嵌套在主容器中，因此可以添加以下属性：

position: relative;

对于主要班级

.main {
    ...
    position: relative;
}

---

这样，在main类中进行的任何定位都将与main的容器相对。

我在class.left中添加了一个z索引，并将主体的填充/边距设置为零

函数Btn（）{
document.getElementById（'bx1'）.classList.add（'outlook'）；
document.getElementById（'bx2'）.classList.add（'outlook'）；
document.getElementById（'bx3'）.classList.add（'outlower'）；
document.getElementById（'bx4'）.classList.add（'intrown'）；
document.getElementById（'bx5'）.classList.add（'intrown'）；
document.getElementById（'bx6'）.classList.add（'intrown'）；
document.getElementById（'bx0'）。removeAttribute（'style'）；
}

*{
框大小：边框框；
}
/*增加*/
身体{
填充：0；
保证金：0；
}
.行{
显示器：flex；
柔性包装：包装；
}
.左{
弹性：20%；
背景色：#f1f1；
填充：20px；
z指数：50；/*增加*/
}
梅因先生{
弹性：80%；
背景色：白色；
填充：20px；
溢出：隐藏；
}
莱夫特先生{
位置：绝对位置；
左：-300px；
}
* {
框大小：边框框；
}
/*动画*/
.向外{
动画名称：myAnimation；
动画持续时间：1.3s；
动画填充模式：正向；
}
.向内{
动画名称：myAnimation2；
动画持续时间：1.3s；
动画填充模式：正向；
}
@关键帧myAnimation{
0% {
不透明度：1；
变换：translateX（0）；
}
100% {
变换：translateX（600px）；
不透明度：0；
显示：无；
}
}
@关键帧myAnimation2{
0% {
不透明度：0；
变换：translateX（0）；
}
100% {
转换：translateX（500px）；
不透明度：1；
}
}

东西
杰出的按预期工作。感谢您的回复。body margin&padding=0的用途是什么？@OverLordGoldDragon有些浏览器的默认值为0。对其他人来说，情况并非如此。如果不是，在本例中，左侧有一个空间，您可以看到新图像集进入。
.main {
    ...
    position: relative;
}