Javascript 使用CSS将圆移动到边框顶部

把我的大问题分解成这个简单的陈述，我在一个红色边框的盒子里有一个蓝色的圆圈

如何使圆保持在中心，但使其重叠在长方体边框的顶部水平线上

我的尝试似乎达到了最终结果：

HTML:

这涉及到我需要手动指定一个

左

和

顶

，它看起来不会保持居中，或者会非常灵敏

其当前外观的示例：

.line{
位置：相对；/*以包含内部绝对圆位置*/
边缘顶部：50px；
背景：红色；
身高：0；
边框：1px纯红；
}
.圆圈{
位置：绝对位置；
宽度：40px；高度：40px；
顶部：50%；左侧：50%；/*50%的家长*/
转换：转换（-50%，-50%）；/*-50%的自我*/
背景：蓝色；
边界半径：50%；
}

这里是

.circle{
显示器：flex；
对齐项目：居中；
文本对齐：居中；
证明内容：中心；
颜色：白色；
边界半径：50%；
宽度：130px；
高度：130像素；
保证金：0自动；
背景：蓝色；
位置：相对位置；
}
.边界{
边框：实心1px；
边框颜色：红色；
宽度：100%；
高度：70像素；
顶部：30px；
位置：绝对位置；
}
.集装箱{
边缘顶端：40px；
位置：相对位置；
}

在此处圈出文本

只需将以下内容添加到circle类中：

  position: relative;
  top: -20px;

看看这个

.circle{
显示器：flex；
对齐项目：居中；
文本对齐：居中；
证明内容：中心；
颜色：白色；
边界半径：50%；
宽度：130px；
高度：130像素；
保证金：0自动；
背景：蓝色；
位置：相对位置；
顶部：-65px；
左：0；
}
.集装箱{
边缘顶部：100px；
边框：实心1px；
边框颜色：红色；
}

在此处圈出文本

那么您希望它扩展到红色框的边界之外吗？这就是我理解你的意思。还是只想让它接触直线？使用相对定位使圆居中，并使用相对位置G将其向上移动：

.circle {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: white;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  background: blue;
  position:absolute;
  top: -5px;
  left: 200px;
}

.container {
  margin-top: 40px;
  border: solid 1px;
  border-color: red;
}

  position: relative;
  top: -20px;