在 CSS 中向上移动图像答案

【问题标题】：Moving an image up in CSS在 CSS 中向上移动图像
【发布时间】：2016-10-31 13:11:00
【问题描述】：

所以，在过去的一个小时里，我一直在尝试使用 css 属性 position 移动这张图片。我的问题是每次我使用top 或bottom 移动它时，它都无法正常工作。这是before 使用上述属性和after 的屏幕截图。您可以在下面找到我的 html 和 css。最后，这个position 必须是absolute，否则图像会完全消失。

HTML

<section class="row posts">
    <div class="col-md-6 col-md-offset-3">
        <header><h3>What others have to say...</h3></header>
        @foreach($posts as $post)
            <article class="post" data-postid="{{ $post->id }}">
                <p>{{ $post->body }}</p>
                <div class="info">
                    Posted by {{ $post->user->user_name }} on {{ $post->created_at }}
                </div>
                <div class="interaction">
                    <a href="#" class="like heart"></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
                    <a href="#" class="like">Dislike</a>
                    @if(Auth::user() == $post->user)
                        |
                        <a href="#" class="edit">Edit</a> |
                        <a href="{{ route('post.delete', ['post_id' => $post->id]) }}">Delete</a>
                    @endif
                </div>
            </article>
        @endforeach
    </div>
</section>

CSS

.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;
}

【问题讨论】：

标签： html css laravel laravel-5 blade

【解决方案1】：

我认为您应该将no-repeat 与background 放在同一行

它对我有用，我不知道为什么

https://jsfiddle.net/moongod101/2wh6b9rq/

【讨论】：

【解决方案2】：

如何添加这个：

.interaction {
    position: relative;
}

【讨论】：