如何隐藏延伸到其容器之外的元素？ [复制]答案

【问题标题】：How to hide elements extending outside of their container? [duplicate]如何隐藏延伸到其容器之外的元素？ [复制]
【发布时间】：2020-07-20 05:05:21
【问题描述】：

我有一个动画蓝色框，它应该来自右侧并输入其父 div。我试图找出一种方法使该框在进入父 div 之前不可见。最外层的 div（灰色）由框架控制，因此基本上无法访问。

.outer-div-no-access {
  background: gray;
  position:relative;
  height:100vh;
  padding: 10px;
}

.parent-div {
  position: relative;
  background-color: yellow;
  border: 2px solid green;
  height: 200px;
  width: 50%;
}

.child-div {
  position: relative;
  height: 25%;
  background-color: lightblue;
  animation-name: example;
  animation-duration: 2s;
  left: 25%;
}


@keyframes example {
    from {
        left: 100%;
    }
    to {
        left: 25%;
    }
}

<html>
<body>
   <div class="outer-div-no-access">
      <div class="parent-div">
        <div class="child-div">

        </div>
      </div>
   </div>
</body>
 
</html>

【问题讨论】：

标签： html css

【解决方案1】：

在父级上使用overflow:hidden：

.outer-div-no-access {
  background: gray;
  position:relative;
  height:100vh;
  padding: 10px;
}

.parent-div {
  overflow: hidden;
  position: relative;
  background-color: yellow;
  border: 2px solid green;
  height: 200px;
  width: 50%;
}

.child-div {
  position: relative;
  height: 25%;
  background-color: lightblue;
  animation-name: example;
  animation-duration: 2s;
  left: 25%;
}


@keyframes example {
    from {
        left: 100%;
    }
    to {
        left: 25%;
    }
}

<html>
<body>
   <div class="outer-div-no-access">
      <div class="parent-div">
        <div class="child-div">

        </div>
      </div>
   </div>
</body>
 
</html>

【讨论】：