我试图使我的绝对定位元素具有响应性并保持我设置的左、右、下和上的位置，但它在我改变屏幕尺寸时不断变化，它只是坚持那个位置，是在那里我可以解决这个问题，这样绝对定位的按钮将像在移动视图中一样随着它们所附加的图像继续移动？

<div class="header-hero">
          <div class="header-text">
            <h3 class="header-text-h3">Hey</h3>
            <h1 class="header-text-description">
              Make Banking Easy with Express
            </h1>
            <p class="header-text-texts">
              Together we can make banking awesome!
            </p>
          </div>
          <div class="header-image">
            <img src="./assets/hand.jpg" alt="" class="header-hand" />
            <button class="header-image-1">Transfer</button>
            <button class="header-image-2">Loan</button>
          </div>
        </div>

.header {
  &-hero {
    height: 40px;
  }
  &-nav {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-img {
    width: 80px;
  }
  &-button {
    padding: 0.5rem 1.5rem;

    // height: 1rem;
    margin-right: -1rem;
    height: 100%;
  }
  &-hero {
    position: relative;
  }

  &-text {
    width: 80%;
    padding-top: 2rem;
    font-size: 1.2rem;

    &-texts {
      background-image: linear-gradient(
        to left,violet,indigo,blue,orange,red
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  &-image {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    // top: 80px;
    // bottom: -200%;

    &-1 {
      top: 10px;
      position: absolute;
      left: 205px;
      z-index: -1;

      // @media screen and (min-width: 374px) {
      //   left: 220px;
      // }
      // @media screen and (max-width: 320px) {
      //   left: 178px;
      //   top: 50px;
      // }
      // @media screen and (min-width: 359px) {
      //   left: 205px;
      //   top: 90px;
      // }
    }
    &-2 {
      top: 170px;
      position: absolute;
      left: 84px;
      z-index: -1;
      margin: 0 auto;

      // @media screen and (max-width: 320px) {
      //   left: 67px;
      // }
      // @media screen and (min-width: 359px) {
      //   left: 80px;
      //   top: 240px;
      // }
    }
  }
  &-hand {
    width: 50%;
    position: fixed;
    // top: -50%;
    // transform: translateY(43%);
    margin: 0 auto;

    // @media screen and (max-width: 320px) {
    //   transform: translateY(20%);
    // }
    // @media screen and (min-width: 359px) {
    //   transform: translateY(30%);
    // }
  }
}