即使位置发生变化，图像/链接也会粘在左上角

Question

这是我的CSS和HTML。

＆＃13;

＆＃13;

div.musiclink {
  position: relative;
}

a.music {
  width: 258px;
  height: 117px;
  display: block;
  background: deepskyblue url('MUSIC-cursive.png') center top no-repeat;
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  -o-transform: rotate(330deg);
  transform: rotate(330deg);
}

a.music:hover {
  background-image: url('MUSIC-cursive-hover.png');
}

a.store {
  position: relative;
  left: 500px;
  top: 100px;
  width: 220px;
  height: 110px;
  display: block;
  background: deeppink url('STORE-cursive.png') center top no-repeat;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

a.store:hover {
  background-image: url('STORE-cursive-hover.png');
}

＆＃13;

<div class="musiclink">
  <a href="MUSIC.html" class="music"> </a>
</div>

<div class="storelink">
  <a href="STORE.html" class="store"> </a>
</div>

＆＃13;

＆＃13;

＆＃13;

当我使用图像而不是href链接时，事情就是我成功地定位了一切，但现在没有什么能像我想要的那样工作。当我调整浏览器大小时，我不希望图像/链接移动。