javascript - CSS - 通过父高度/宽度限制元素位置以防止溢出

Question

如果绝对定位元素溢出父容器，是否可以通过限制其位置来防止其溢出其父容器？

在我的例子中:我有一个圆图，里面有气泡，我使用 border-radius 来创建圆，并使用 position:absolute + top 和 left 根据计算结果定位元素。

我想防止这种情况发生:

在这种情况下，或者像top: 0这样的极端情况； left: 0; 气泡溢出父圆圈，我希望它包含在圆圈范围内。

这有可能吗？或者我必须使用 javascript 吗？如果我必须使用 javascript:是否有可能获得用 border: radius: 100% 舍入的元素的限制？

Answer 1

这不是一个完美的解决方案，但是 overflow: hidden 已经为此提供了一些内置功能。我正在使用 JavaScript 让点跟随光标:

$('.circle').on('mousemove', function(e) {
  $('.dot').css({
    'top': e.clientY,
    'left': e.clientX
  });
});

.circle {
  width: 180px;
  height: 180px;
  border: 5px solid black;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.dot {
  border-radius: 50%;
  background: red;
  width: 30px;
  height: 30px;
  margin-left: -30px;
  margin-top: -30px;
  position: absolute;
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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