将圆圈置于盒子顶部并留在那里（响应）

Question

有人可以就如何（以反应灵敏的方式）在盒子上放置一个圆圈给出一些指导，就像下面的图片一样。

我尝试的是使div框相对而且负px值，但显然当我缩小尺寸时，框的顶部不再位于圆的中间。

有人可以提供一些指导，说明如何实现这一目标并使其响应？

Answer 1

当框和圆都需要响应时（即使用视口改变框和圆的尺寸），使用的最佳方法是使用平移变换。

最初将圈子相对于left: 50%和top: 0px处的父级绝对定位，然后使用translateX(-50%)将其向左移动50％的圆圈宽度{{1}将它移动到顶部50％的圆圈高度。无论它们的大小如何，这两者一起会使圆圈保持其位置。

小圈和框响应的片段：

translateY(-50%)

.box {
  position: relative;
  display: inline-block;
  height: 60vh;
  width: 40vh;
  border: 2px solid;
  margin-top: 15vh;
}
.circle {
  position: absolute;
  height: 30vh;
  width: 30vh;
  top: 0px;
  left: 50%;
  border: 2px solid;
  border-radius: 50%;
  background: url(http://lorempixel.com/400/400);
  transform: translateX(-50%) translateY(-50%);
}

只有框响应的代码段

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='box'>
  <div class='circle'></div>
</div>
<div class='box'>
  <div class='circle'></div>
</div>
<div class='box'>
  <div class='circle'></div>
</div>

.box {
  position: relative;
  display: inline-block;
  height: 60vh;
  width: 40vh;
  min-width: 150px;
  min-height: 225px;
  border: 2px solid;
  margin-top: 15vh;
}
.circle {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 0px;
  left: 50%;
  border: 2px solid;
  border-radius: 50%;
  background: url(http://lorempixel.com/100/100);
  transform: translateX(-50%) translateY(-50%);
}