在css中将图片移到顶部

Question

我有一个fiddle我希望将图像（键盘）移向顶部，使其看起来与下面的设计完全相似。

在我的小提琴中，键盘图像略微向下，如小提琴所示。我想知道如何将键盘图像略微向上推，使其看起来与上述设计完全相似。

我的HTML代码具有键盘图像的片段是：

    <div class="full-stack-developer">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-3 left-side">
                    <a href=""><img src="assets/img/Uploads/keyboard.png" </a></div>
                <div class="col-lg-3 right-side"> <a href="">Full Stack Developer</a>
                    <ul>
                        <a href=''>
                            <li>Qualification</li>
                        </a>
                        <a href=''>
                            <li>Go here</li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </div>

只是检查是否可以在不使用position: relative and position: absolute的情况下完成？

Answer 1

您可以将边距顶部-50px添加到图像中。

#id_keyboard {
    margin-top: -50px;
}

https://jsfiddle.net/2bd2zrm9/5/embedded/result/

Answer 2

为图像和一些css添加一个id，如下所示： 设置ID

 <a href=""><img id = "offset" src="https://s10.postimg.org/wz9hbucvd/keyboard.png" </a>

将其向上移动

#offset{
  margin-top:-40px
}