如何用另一个div隐藏动画中div的超出部分

嘿，我懂你想要的效果了——让灰色小方块在红色大方块内移动时，超出红色方块的部分自动隐藏，哪怕只超出一半，就只显示在里面的那一半。你之前尝试的z-index:1思路不对，因为它只是控制元素的层级覆盖，没法实现内容裁剪的功能。

核心解决方案 #

给.big_block添加两个关键CSS属性：

• position: relative：让父元素成为定位上下文，这样overflow:hidden才会生效（overflow只对定位的父元素生效）
• overflow: hidden：自动隐藏所有超出父元素边界的子元素内容

修改后的完整代码 #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="big_block">
  <div class="block"></div>
</div>

CSS

.block {
  position: absolute;
  background-color: #abc;
  left: 50px;
  width: 90px;
  height: 90px;
  margin: 5px;
}
.big_block {
  position: relative; /* 新增：设置定位上下文 */
  overflow: hidden; /* 新增：隐藏超出内容 */
  left: 100px;
  background-color: red;
  height: 100px;
  width: 100px;
}

JS

$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});

为什么这个方法有效？ #

• position: relative 给.big_block创建了一个定位容器，子元素.block的绝对定位会相对于这个父容器计算位置
• overflow: hidden 会直接裁剪掉所有超出父容器边界的子元素部分，完美实现你要的“一半在外就一半不可见”的效果，而不是像z-index那样完全覆盖子元素

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