html - 使用css定位img元素

Question

代码:

html -> https://pastebin.com/zNekXPLQ 
css -> https://pastebin.com/tifEY0A4

我想使 instagram 按钮距右侧 30 像素，距顶部 30 像素。但是当使用 margin-right: 30px; 时，没有任何反应，而当使用 right: 30px; 时，它就消失了。有人可以解释一下何时以及如何使用 margin-right ect 和 right, left, top, bottom 属性吗？我是 html/css 的新手，定位元素似乎是最难通过的瓶颈。

Answer 1

你有 position:fixed on .topbar 但它没有宽度。设置继承自容器的宽度，然后设置按钮的位置，我建议将class添加到a标签而不是img标签

HTML:

<a href="https://www.instagram.com/majic.photography/" target="_blank" class = "instagrambutton">
     <img src="instagram-logo-white.png" alt="majic.photography" />
</a>

CSS:

.topbar {
    position:fixed;
    width:inherit;
}

.instagrambutton {
    position: absolute;
    width: 50px;
    background-color: black;
    padding: 10px;
    top:30px;
    right:30px
}