Html 在CSS中向上移动图像

所以，在过去的一个小时里，我一直在尝试使用css属性

position

移动这个图像。我的问题是每次使用

top

或

bottom

移动它时，它都无法正常工作。这里是一个使用上述属性和属性的屏幕截图。下面你可以找到我的html和css。最后，此

位置

必须为

绝对位置

，否则图像将完全消失

HTML

---

添加以下内容如何：

.interaction {
    position: relative;
}

---

我想你应该把

no repeat

和

background

放在同一行

这对我来说很有用，我不知道为什么

.heart{
    background: url('http://localhost:8079/uncaughterror/public/src/img/web_heart_animation.png');
    background-position: left;
    background-repeat: no-repeat;
    height: 50px; width: 50px;
    cursor: pointer;
    position: absolute;
    left: 12px;
    bottom: 5px; //This or 'top' is what causes my entire problem
    background-size:1450px;
}

.heart:hover {
    background-position: right;
}

.interaction {
    position: relative;
}