Why does my "top" and "left" styles not work?

Question

The image is not moving I've looked though other queries but none of the answers work for me.

HTML: The image that I'm having problems with is "frisk".

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title id="title" style="font-family:WD">CONTINUE</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
        <script src="code.js"></script>
    </head>
    <body>
        <p id="myDIV" class="invert" style="font-family:WD"></p>
        <!--<button onclick="myFunction()">Click Me</button>-->
        <img id="frisk" src="sprite/frisk/frisk_up.png">
    </body>
    <iframe src="music/silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
    <audio id="player" loop>
        <source src="muisc/mus_smile.mp3" type="audio/mp3">
    </audio>
    <audio id="1" >
        <source src="voice/voice_smile/voice_gaster_1.mp3" type="audio/mp3">
    </audio>
    <audio id="2" >
        <source src="voice/voice_smile/voice_gaster_2.mp3" type="audio/mp3">
    </audio>
    <audio id="3" >
        <source src="voice/voice_smile/voice_gaster_3.mp3" type="audio/mp3">
    </audio>
    <audio id="4" >
        <source src="voice/voice_smile/voice_gaster_4.mp3" type="audio/mp3">
    </audio>
    <audio id="5" >
        <source src="voice/voice_smile/voice_gaster_5.mp3" type="audio/mp3">
    </audio>
    <audio id="6" >
        <source src="voice/voice_smile/voice_gaster_6.mp3" type="audio/mp3">
    </audio>
    <audio id="7" >
        <source src="voice/voice_smile/voice_gaster_7.mp3" type="audio/mp3">
    </audio>
    <audio id="redacted" loop>
        <source src="music/mus_redacted.mp3" type="audio/mp3">
    </audio>
    <script>
       var ex = document.getElementById("player")
       ex.volume = 0.5;
       ex.playbackRate = 1;
    </script>
    <button onclick=room(this)>continue?</button>
    <style>
        body {
            background-image: url('room/room_mysteryman.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 0% 0%;
        }
    </style>
</html>

Javascript: I'm trying to move frisk 100px from the top and left.

text = 0
t = -3
next = true
wtext = "ENTRY  NUMBER<br>SEVENTEEN"
add = 0
count = 0
friskX = screen.availWidth/2
friskY = screen.availHeight-100
document.getElementById("frisk").style.position = "absolute"
document.getElementById("frisk").style.left = 100 +"px"
document.getElementById("frisk").style.top = 100 + "px"

function room(x) {
    x.style.display = 'none';
    var redacted = document.getElementById("redacted")
    redacted.play()
    document.body.style.backgroundSize = "100% 100%"
    document.onkeydown = checkKey
    document.title = "ERROR [Ln 666, Col 66] object 'mysteryman.png' not found"
}

function checkKey(button) {
    if (button.key == "ArrowLeft") {
        friskX += -1
        document.getElementById("frisk").src="sprite/frisk/frisk_left.png"
    } else if (button.key == "ArrowRight") {
        friskX += 1
        document.getElementById("frisk").src = "sprite/frisk/frisk_right.png"
    }

    if (button.key == "ArrowUp") {
        friskY += -1
        document.getElementById("frisk").src = "sprite/frisk/frisk_up.png"
    } else if (button.key == "ArrowDown") {
        friskY += 1
        document.getElementById("frisk").src = "sprite/frisk/frisk_down.png"
    } 

    document.getElementById("frisk").style.left = friskX + "px"
    document.getElementById("frisk").style.top = friskY + "px"
}

function ask() {
    ticking = setInterval(ticked, 100)
    document.title = "VOID"
    ex.play()
}

function ticked() {
    t += 1
    var x = document.getElementById("myDIV");
    if (t === 0) {
        text += 1
        if (text === 1) {
            wtext = "ENTRY  NUMBER<br>SEVENTEEN";
        } else if (text === 2) {
            wtext = "DARK<br>DARKER<br>YET  DARKER";
        } else if (text === 3) {
            wtext = "THE DARKNESS<br>KEEPS  GROWING";
        } else if (text === 4) {
            wtext = "THE SHADOWS<br>CUTTING  DEEPER";
        } else if (text === 5) {
            wtext = "PHOTON<br>READINGS<br>NEGATIVE";
        } else if (text === 6) {
            wtext = "THIS NEXT<br>EXPERIMENT";
        } else if (text === 7) {
            wtext = "SEEMS";
        } else if (text === 8) {
            wtext = "VERY";
        } else if (text === 9) {
            wtext = "VERY";
        } else if (text === 10) {
            wtext = "INSTRESTING";
        } else if (text === 11) {
            wtext = "...";
        } else if (text === 12) {
            wtext = "WHAT  DO  YOU<br>TWO  THINK";
        } else if (text > 12) {
            window.close()
        }
    }

    if (wtext[t+add] === undefined) {
        count += 1
        if (count === 7) {
            x.innerHTML = ""
            add = 0
            t = -1
            count = 0
        }
    } else if (wtext[(t)+add] === "<") {
        x.innerHTML = x.innerHTML+"<br>"
        add += 3
    } else {
        x.innerHTML = x.innerHTML+wtext[(t)+add]
        if (wtext[t+add] != " ") {
            var smile = document.getElementById(Math.floor(Math.random() * 7) + 1)
            smile.volume = 2;
            smile.play()
        }
    }

}

CSS: Just in case something is being overridden.

@font-face { font-family: WD; src: url('font/pixelated-wingdings.otf'); } 
@font-face { font-family: WD; font-weight: bold; src: url('font/pixelated-wingdings.otf');}
body {
    background-color: black;
  }

.invert{
    filter: invert(100%);
    /*text-align: center;*/
    font-size: 500%;
}

#center {
    text-align: center;
}

#help_me{
    width: 1;
    height: 1;
}

#frisk {
    transform:scale(0.75);
}

Please tell me if I'm doing something wrong. Sorry for my bad code.

Resolved: I had to set the postition style in the CSS.

You have elements oustide the `body`. Jquery is linked but is it used here ? Your js variables aren't declared correctly use `const`, `let`, ...) — Cédric, Nov 04 '22 at 11:25
Is it the image's initial position that doesn't work? I've just tried your code and it appears to be positioning absolute with right:100px and top:100px; with not problem. — Adam, Nov 04 '22 at 11:43
Adam, I accidently copied the code while I was testing something so now it's back to "left". And the image does not move at all — Sebastian Chapman, Nov 04 '22 at 11:50
As I can't see it in your css snippet, I'll state the obvious: `top` and `left` properties in css have no meaning unless the element they apply to has its `position` property set to something other than `static`. See https://developer.mozilla.org/en-US/docs/Web/CSS/position — Dave Pritlove, Nov 04 '22 at 12:13
Dave, document.getElementById("frisk").style.position = "absolute" document.getElementById("frisk").style.left = 100 +"px" document.getElementById("frisk").style.top = 100 + "px" — Sebastian Chapman, Nov 04 '22 at 13:04

score 0 · Answer 1 · answered Nov 04 '22 at 13:38

The frisk image doesn't move because the script tag that references the code.js file is in the head section of the document. The html page is processed from the top down.

As a result of this the code that sets the frisk image properties runs before the body section has rendered and so the frisk image is null. You can see this easily in your browser developer tools (usually accessed via F12 key).

There are a number of ways you can fix this. With reference to this earlier answer JavaScript page lifecycle which has a number of references which explain this more fully.

The first and simplest solution (not necessarily the best) is to move the code.js script tag from head to just after the script tag for the player. This should at least allow you to see your code working.

If you want or need to keep your code.js script in the head of the page then you can wrap the code you want to run in a function as follows

function moveFisk(){
  document.getElementById("frisk").style.position = "absolute";
  document.getElementById("frisk").style.left = 100 +"px";
  document.getElementById("frisk").style.top = 100 + "px";
 }

you can then either call this function from the body onload event by adding an event listener to the body tag like this:

<body onload="moveFisk()" >

or by adding an event listener to the window object in code like this:

function moveFisk(){
 .....
 }

window.addEventListener('load', moveFisk);

Either should work. In both cases the load event should ensure that all resources, images, scripts etc have been loaded for that object.

Why does my "top" and "left" styles not work?

1 Answers1