如何实现粉色圆形随带边框的div动态定位至右上角？

要让粉色圆形始终跟着带边框的div右上角联动，核心是把圆形作为div的子元素，利用父元素定位参考+子元素绝对定位实现。

修改后的HTML代码： #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- 修正拼写错误：viewpoint → viewport -->
    <title>Family Tree Creator</title>
    <link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="nameone">
        Core water is soooo good!!
        <div class="circleone"></div>
    </div>
</body>
</html>

修改后的CSS代码： #

.nameone {
  border: 3px solid darkgray;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  padding: 15px;
  /* 父元素作为定位基准，本身是absolute也可作为参考，加上relative更明确 */
  position: relative;
}

.circleone{
  border: 3px solid pink;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  /* 绝对定位，相对于父元素.nameone调整位置 */
  position: absolute;
  /* 向上偏移圆形总高度的一半，让圆心对准边框右上角 */
  top: -10.5px;
  /* 向右偏移圆形总宽度的一半 */
  right: -10.5px;
  /* 可选：添加白色背景，避免圆形与页面背景融合，保证边框清晰 */
  background-color: white;
}

关键说明： #

1. 元素嵌套：把圆形div放到带边框的div内部，形成父子关系，圆形的位置就能跟着父元素的尺寸、位置动态变化。
2. 定位逻辑：父元素设置position: relative（或本身是absolute/fixed）后，子元素的position: absolute会以父元素的边框为定位基准。
3. 偏移计算：圆形总尺寸为15px（内容）+ 3px*2（边框）=21px，设置top: -10.5px和right: -10.5px，能让圆形的圆心刚好对准父元素边框的右上角，完美贴合。
4. 细节修正：原meta标签中viewpoint拼写错误，改为viewport才能正确适配移动端。

内容的提问来源于stack exchange，提问作者danchdrezzing