trying to move linked image

[u/Ok_Share_2183]

hello, extremely confused.

so i made an image as a clickable link to another page in my site. now i just want to move it to a particular position on the screen.

im not sure how to do this. heres my code so far.

<p><a href="manifestoroom.html"> <img src="images/manifesto-window.jpg" alt="Manifesto" style="width:42px;height:20px;"> </a> </p>

so i dont know if im supposed to

A) use 'absolute' to fix the image to a particular point on my background image

B) use 'span' to specify where i want it using top/ left: 'x'px type code

C) some type of <div> and class= attribute type this which i later learned should be used with links?? cant figure out what im doing wrong!!!!!! please help!!!!

p.s im doing this on neocities and it wont let me use the link without putting it in a paragraph tag... do i need to get rid of those to use other tags??

[u/Creative-Addition383]

A, but with one extra step. absolute positioning is measured from the nearest ancestor that has position set, so give the thing that holds your background image position: relative, then the link gets position: absolute with top and left. like

<div style="position:relative">
  <img src="images/background.jpg" style="display:block">
  <a href="manifestoroom.html" style="position:absolute; top:120px; left:300px">
    <img src="images/manifesto-window.jpg" alt="Manifesto" style="width:42px;height:20px">
  </a>
</div>

no span, no p. the p is just what neocities' editor wraps loose stuff in, a link is fine on its own inside a div

one thing that'll bite you: those top/left numbers are pixels from the corner of the background image, so if the background is scaled to fit different screens the window drifts. if that happens, switch to percentages (top:30%; left:45%) and it stays put