Flexbox布局下React英雄区元素响应式定位问题求助

我在React的Hero（英雄）区域中添加了两个光标图片元素，目前使用absolute绝对定位，窗口缩放时会固定在预设位置无法自适应。

参考图：

以下是我的React组件代码和CSS代码：

React组件代码 #

function Hero() {
  return (
    <section className="hero">
      <div className="hero-content">
         <h1>Hi, I'm Jaed!</h1>
        <p>I transform ideas into engaging and accessible interfaces, bridging the gap between business need and user delight ✨</p>
      </div>

        <img className="cursor1" src="Comment cursor1.png"></img>
         <img className="cursor2" src="Comment cursor2.png"></img>
    </section>
  );
}
export default Hero;

CSS代码 #

.cursor1{
width: 80px;
height: 60px;
position: absolute;
top: 500px;
left: 500px;
}

.cursor2{
width: 100px;
height: 60px;
position: absolute;
top: 400px;
right: 550px;
}

.hero{
padding: 200px 0;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
}

.hero-content{
max-width: 800px;
padding: 100px 0px;
text-align: center;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
padding-left: 112px;
padding-right: 112px;
padding-top: 64px;
padding-bottom: 64px;
margin-left: 240px;
margin-right: 240px;
}

.hero-content h1{
font-weight: 900;
font-size: 80px;
color: #3B519E;
text-align: center;
align-items: center;
margin: 0;
}

请问有什么方法可以实现响应式效果？谢谢！
PS：代码确实在单独文件中，我不知道怎么在Stack Overflow的另一个面板添加CSS代码。

解决方案 #

核心思路 #

要实现响应式，需要让光标相对于Hero容器定位，同时用相对单位替代固定像素值，再结合媒体查询优化小屏幕表现。

修改后的完整代码 #

React组件（结构无需改动）

function Hero() {
  return (
    <section className="hero">
      <div className="hero-content">
         <h1>Hi, I'm Jaed!</h1>
        <p>I transform ideas into engaging and accessible interfaces, bridging the gap between business need and user delight ✨</p>
      </div>

        <img className="cursor1" src="Comment cursor1.png" alt="光标1"></img>
         <img className="cursor2" src="Comment cursor2.png" alt="光标2"></img>
    </section>
  );
}
export default Hero;

优化后的CSS代码

/* 给Hero容器添加相对定位，让子元素绝对定位基于该容器 */
.hero{
  padding: 200px 0;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  min-height: 600px; /* 保证Hero区域有足够高度承载光标 */
}

.hero-content{
  max-width: 800px;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding: 64px 112px; /* 合并冗余的padding写法 */
  margin: 0 240px;
}

/* 用clamp实现响应式字体大小：最小40px，理想8vw，最大80px */
.hero-content h1{
  font-weight: 900;
  font-size: clamp(40px, 8vw, 80px);
  color: #3B519E;
  text-align: center;
  margin: 0;
}

/* 光标1：用百分比定位，clamp控制大小，auto保持图片比例 */
.cursor1{
  width: clamp(50px, 8vw, 80px);
  height: auto;
  position: absolute;
  top: 70%;
  left: 15%;
}

/* 光标2：同上面的响应式逻辑 */
.cursor2{
  width: clamp(70px, 10vw, 100px);
  height: auto;
  position: absolute;
  top: 55%;
  right: 15%;
}

/* 媒体查询：适配小屏幕（768px以下） */
@media (max-width: 768px) {
  .hero-content{
    margin: 0 20px;
    padding: 40px 20px;
  }
  
  .cursor1{
    top: 80%;
    left: 10%;
  }
  
  .cursor2{
    top: 45%;
    right: 10%;
  }
}

关键改动说明 #

1. 容器相对定位：给.hero加position: relative，让光标相对于Hero区域定位，不会脱离布局流。
2. 相对单位替代固定像素：用百分比设置top/left/right，用clamp()和vw控制图片大小，实现随窗口/容器自适应。
3. 保持图片比例：设置height: auto，避免缩放时图片变形。
4. 媒体查询优化：针对小屏幕调整内容边距和光标位置，保证移动端体验。

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