如何使图片相对HTML元素定位并在窗口缩放时保持位置？

问题根源 #

你当前用position: absolute给图片定位时，因为父容器.site-content没有设置position: relative，图片会相对于整个视口定位。right: 270px是固定像素值，窗口缩放时视口宽度变化，居中的mat-card位置不变，但图片和视口右侧的距离固定，自然就偏离了mat-card的右上角。

解决方案 #

我们需要让图片相对于mat-card所在的容器定位，同时调整定位规则，确保窗口缩放时相对位置不变：

1. 调整HTML结构（可选，更清晰的写法）

把图片和mat-card放到同一个容器里，让定位上下文更明确：

<main class="site-content">
  <div class="card-wrapper">
    <img class="Logo" src="assets/YappLogo.png" alt="Logo">
    <mat-card>
      ...
    </mat-card>
  </div>
</main>

2. 修改CSS样式

.site-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* 移除不需要的flex-direction: row（默认就是横向）和align-content: end（单行flex不生效） */
}

.card-wrapper {
  position: relative; /* 设置为相对定位，让内部绝对定位元素以此为参照 */
}

img.Logo {
  position: absolute;
  top: 0;
  right: 0; /* 相对于card-wrapper的右上角定位 */
  transform: translate(15%, -15%); /* 按需调整偏移量，让图片刚好在mat-card右上角后方 */
  width: 20%;
  height: auto;
  z-index: -1; /* 确保图片在mat-card下方（后方） */
}

关键修改点说明 #

• .card-wrapper设置position: relative：让图片的绝对定位不再参照视口，而是参照这个包裹mat-card的容器，容器会跟着.site-content始终居中。
• right: 0配合transform：不用固定像素，而是基于容器的右上角做偏移，窗口缩放时容器位置和比例同步变化，图片的相对位置自然保持不变。
• z-index: -1：保证图片在mat-card后方，不会遮挡卡片内容。

如果不想额外加.card-wrapper，也可以直接给.site-content设置position: relative，然后用calc()结合mat-card的宽度计算图片位置，但额外容器的方式更直观、易维护。

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