如何让CSS心形元素在网页缩放时固定于图片右上角

安全阿岳

2026-8-21

解决CSS心形固定在图片右上角的移位问题

我用CSS伪元素制作了一个心形（代码来自谷歌），希望将其固定在图片的右上角，但网页缩放时心形会移位。尝试使用position: fixed;后心形完全消失。

问题根源

原来的代码中心形用position: absolute;但没有设置相对定位的父容器，导致它相对于整个页面（body）定位，页面缩放时固定的top/right值就会偏离图片。而position: fixed;是相对于浏览器窗口定位，和图片的位置无关，自然不会出现在图片上。

解决方案：给图片加相对定位容器

要让心形始终跟着图片右上角，只需给图片包裹一个设置了position: relative;的容器，心形的绝对定位就会以这个容器为基准，不会随页面缩放移位。

修改后的完整代码

HTML结构

<div class="img-container">
  <img class="katieimg" src="images/me.jpeg" />
  <span class="heart"></span>
</div>

CSS样式

/* 图片容器：相对定位 + 保持原有的居中效果 */
.img-container {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-width: 200px;
}

/* 图片样式保留，仅调整宽度为100%以适配容器 */
.katieimg {
  border-radius: 10px;
  border: 5px solid rgb(0, 0, 0);
  width: 100%;
  max-height: 250px;
}

/* 心形样式：调整定位基准为容器 */
.heart {
  background-color: rgb(0, 255, 229);
  display: inline-block;
  height: 30px;
  position: absolute;
  /* 相对于容器右上角的偏移距离，可按需修改 */
  top: 10px;
  right: 10px;
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: rgb(0, 255, 229);
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  top: -15px;
  left: 0;
}

.heart:after {
  left: 15px;
  top: 0;
}