如何将小图片中心精准定位到另一盒子元素的右上角？

需求：将小图片的中心精准对齐到目标盒子的右上角，图片允许部分超出盒子范围。当前用固定视口单位（vh/vw）的绝对定位方案在窗口缩放时会失效，以下是稳定的实现思路：

核心思路 #

利用相对定位+绝对定位+transform位移的组合，让图片的定位锚点绑定到目标盒子所在的容器，而非整个浏览器视口，确保窗口缩放或调整时位置始终正确。

具体步骤 #

• 给目标盒子（.codetitle和.codebox）添加父容器，设置position: relative，作为图片绝对定位的参考坐标系。
• 对图片设置position: absolute，通过top: 0和right: 0让图片的右上角对齐父容器的右上角。
• 用transform: translate(50%, -50%)将图片向左、向上各移动自身尺寸的50%，实现图片中心与父容器右上角重合的效果。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<style>
  /* 新增父容器，作为定位参考 */
  .code-container {
    position: relative;
    width: 30vw;
  }

  .codebox {    
    width: 100%;
    padding: 15px;
    font-family: Courier, sans-serif;
    color: #fff;
    background-color: #111927;
    box-sizing: border-box; /* 确保padding不超出容器宽度 */
  }

  .codetitle {
    width: 100%;
    padding: 5px 20px 5px 10px;
    font-family: Roboto, sans-serif;
    background-color: coral;
    box-sizing: border-box;
  }

  /* 图片的定位样式 */
  .corner-img {
    position: absolute;
    height: 100px;
    top: 0;
    right: 0;
    /* 位移实现中心对齐 */
    transform: translate(50%, -50%);
  }
</style>
<body>
  <p>Lorem ipsum</p>
  <div class="code-container">
    <img src="image.png" class="corner-img">
    <div class="codetitle">Sourcecode:</div>
    <div class="codebox" style="font-family: Courier, monospace;">
      <p><code>
          This is some source code.
      </code></p>
    </div>
  </div>
</body>
</html>

关键细节说明 #

• box-sizing: border-box：确保.codetitle和.codebox的padding不会超出父容器的30vw宽度，避免布局错位。
• transform: translate(50%, -50%)：基于图片自身尺寸计算位移，无需硬编码数值，适配任意尺寸的图片。
• 父容器的position: relative：让图片的绝对定位始终以这个容器为基准，无论窗口如何缩放，图片都会保持与容器右上角的中心对齐关系。

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