如何使此图像保持在页面的左上角

Question

我编写了这段代码，但当我尝试运行它时，图像出现在网页底部并被拉伸。

我该如何更改它，使其始终显示在左上角，并且不被拉伸？有点像导航栏。

仅供参考，这是一个小书签。

function display_image(src, width, height, alt) {
var a = document.createElement("img");
a.src = src;
a.width = width;
a.height = height;
a.alt = alt;
document.body.appendChild(a);
}
display_image('https://raw.githubusercontent.com/mrmojololo/nokokaiwa/main/musicplayer.png', 276, 110, 'imagejs');

Answer 1

创建一个类并将其附加到img元素并编写以下css。

.foo{
position : absolute;
top:0;
left:0;
}

请记住，.foo类将根据其最近定位的父类进行定位。因此，假设.bar是.foo的父级，则编写以下css

.bar{
position : relative;
}
.foo{
position : absolute;
top:0;
left:0;

}