Styling behavior not as expected

[1hubert]

Select Topic Area

Bug

Body

Good day everyone!

I'm new to GitHub Pages and I kind of suck at web development but wanted to host a very simple 41 line index.html file and the website doesn't work as expected.

Expected behavior: Control horizontal position of the top image using ArrowUp/ArrowDown.

Behavior on a Github Pages-deployed website: Pressing ArrowUp/ArrowDown applies a correct change in style to img1 element but it's not visible on the actual website. The top image does not move.

Behavior on a tiiny.host-deployed website: Same as expected behavior.

website (github pages): https://1hubert.github.io/vertically-misaligned-stereogram/
website (tiiny.host): https://plum-danell-7.tiiny.site/
repo: https://github.com/1hubert/vertically-misaligned-stereogram

I'm really not sure what's wrong. Any help would be appreciated.

[Aadil-H-W]

To make it work, you need to adjust the CSS and JavaScript parts:

Set the position of img1 to absolute.
Ensure that img1 is initially positioned where you want it.
Use top instead of left to control the vertical position.

[1hubert]

Thank you very much! Adding the below CSS solved the issue:

 #img1 {
    position: absolute;
  }

Any idea why it didn't work before on github pages as it worked locally and on the other hosting service?