溢出属性不会隐藏遍历点

Question

我有一堆点，我想移动到盒子的一侧，当它们离开盒子的区域时消失，然后从盒子的另一侧返回。这部分工作正常，但无论出于何种原因，溢出属性似乎没有在框中踢，并且当离开框的区域时点不会隐藏。如您所见，box类指定要隐藏的overflow属性：

.box {
  height: 380px;
  width: 33%;
  float: left;
  overflow: hidden;
}

其余代码可以在this笔上找到。我所指的点位于第三个框中。

Answer 1

尝试将position relative提供给盒子容器。您需要重新调整内部点的位置，但这将确定点的溢出可见性。

Box CSS

.box {
  position: relative;
  height: 380px;
  width: 33%;
  float: left;
  overflow: hidden;
}

点的位置必须改变，因为它们现在相对于它们的直接父级：

旧点CSS

#box1 .dot:nth-child(1) {
  margin-top: 182.5px;
  margin-left: calc(33% / 2 - 70px);
}

新点CSS

#box1 .dot:nth-child(1) {
  margin-top: 182.5px;
  margin-left: calc(50% - 70px);
}