How do I make this image stay at the top left of the page?

Viewed 21

I made this code but when I tried running it, the image appeared at the bottom of the webpage and was stretched out.

How can I change this so it is always shown at the top left corner, and isn't stretched out? Kind of like a navigation bar.

FYI this is for a bookmarklet.

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');
1 Answers

create an class and append it to the img element and write the following css .

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

}

remember that the .foo class will be position according to its nearest positioned parent . so suppose .bar is the parent of .foo the write the following css

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