JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <a href="https://www.winhistory-forum.net/showthread.php?tid=15127">
    <div class="knopf" id="knopf1">
      Knopf 1
    </div>
  </a>
  <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position">
    <div class="knopf" id="knopf2">
      Knopf 2
    </div>
  </a>
</div>

CSS

.box {
  background-image: url(https://i.imgur.com/EGG9MZH.jpg);
  /* nur weil ich in dem Fall ein größeres Bild zum Testen nutze */
  background-size: 480px 640px;
  width: 480px;
  height: 640px;
  /* als Anker für absolut positionierte Kind-Elemente,
     sonst wird <html>, also die ganze Seite herangezogen */
  position: relative;
}

.knopf {
  /* für div-tags eigentlich nicht benötigt, für ein <img> aber schon */
  display: block;
  /* absolute Positionierung ggü. einem übergeordnetem Element */
  position: absolute;
  width: 300px;
  height: 130px;
  /* nur zur Demonstration, man kann hier auch einfach Bilder verwenden */
  background-color: silver;
  text-align: center;
  /* 130 + 70 = 200 Pixel */
  padding-top: 70px;
}

.box a {
  /* bitte keinen blauen Links */
  color: inherit;
}

#knopf1 {
  left: 20px;
  top: 20px;
}

#knopf2 {
  left: 20px;
  top: 240px;
}