Question

是的，父容器的位置是相对的。

我试图通过让几个圆从所有方向上的单个点展开直到它们扩展到视口之外来创建一种涟漪效果。

所以我有一些圆形且绝对定位的div。它们的中心如下所示。我有一个单击处理程序，它添加了grow类，它增加了div的宽度和高度以扩展它们。当圆圈扩展到视口以外时，y溢出会很好地隐藏，但不会隐藏x溢出。无法弄清楚是什么。

值得注意的是，当圆圈到达视口的左边缘时，它只会继续向所有其他方向扩展;窗口的左边缘似乎是一个无法穿越的边界。

<body>
  <div class="circle"></div>
</body>

body {
  position: relative;
}

.circle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 1000px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 1s ease-in-out;
  overflow: hidden;
}

.grow {
  border: 1px solid #000;
  width: 2000px;
  height: 2000px;
}

$(".circle").click(function() {
  $(this).addClass("grow");
});

Answer 1

当你将'top'，'right'，'bottom'和'left'设置为all时，大于视口的绝对定位元素不会相对于它们自己的大小居中零。您需要将元素设置为相对于其自身大小居中，并在其父级上设置overflow: hidden。一种方法是将left:设置为50%，然后将margin-left:设置为元素大小的一半。像这样：

body { overflow: hidden; } .circle { position: absolute; width: 10px; height: 10px; border: 1px solid #000; border-radius: 1000px; margin: 0 auto; left: 50%; margin-left: -5px; transition: all 1s ease-in-out; } .grow { border: 1px solid #000; width: 2000px; height: 2000px; margin-left: -1000px; }

我认为这就是你所说的。请参阅this CodePen。

中心div上的溢出不会隐藏

1 个答案: