CSS滑块表现奇怪

Question

所以我正在学习CSS过渡和转换，并试图在CodePen中创建一个简单的滑块。基本的想法是我有一个div在另一个上面，我希望第一个在悬停时从第二个滑落。它工作正常没有任何溢出属性，但一旦我添加溢出：隐藏到底层方块，它推动上面的方块向下。这是为什么？

http://codepen.io/johnnycopes/pen/BKReOq

--- HTML ---

<div class="container">
  <div class="shape">
    <div class="shape-cover">
    </div>
  </div>
</div>

--- CSS ---

body {
  font-family: Verdana;
  background: #fff0a5;
}

.container {
  margin: 0 auto
}

.shape {
  margin: 50px auto 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: #ffb03b;
}

.shape-cover {
  margin: 50px auto 0;
  height: 200px;
  width: 200px;
  background: #468966;
  transform: translateX(0%);
  transition: transform .5s ease-in-out;
}

.shape-cover:hover {
  transform: translateX(100%);
}

Answer 1

这是因为你在“覆盖广场”上使用了一个边距。

形状覆盖在形状内部，因此形状覆盖的边缘将相对于其父形。

因此，请尝试删除shape-cover div上的边距。