子Div从父Div中伸出

Question

我试图将角色div放入游戏div中，但它很突出。我正在尝试制作一个游戏，我在css方面没有太多经验，如果有任何建议和反馈，我将不胜感激。

* {
  padding: 0;
  margin: 0;
}
#game {
  margin: auto;
  width: 400px;
  height: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#block {
  width: 50px;
  height: 500px;
  background-color: black;
  position: relative;
  left: 400px;
  animation: block 2s infinite linear;
}
@keyframes block {
  0% {
    left: 400px;
  }
  100% {
    left: -50px;
  }
}
#character {
  height: 50px;
  width: 50px;
  background-color: black;
  margin: auto;
  float: left;
}

<div id="game">
  <div id="block"></div>
  <div id="character"></div>
</div>

以下是JSFiddle：https://jsfiddle.net/skltnboss/Ljb845h3

Answer 1

我不完全理解stick，但如果你想让它不超过#游戏的边界，那么让左属性不小于0:

#character: {
   left: 0;
}

如果你想让它向左移动并像现在一样消失，但不退出#游戏，那么指定要隐藏的#游戏的溢出属性：

#game {
   overflow: hidden;
}