Image not moving when style.top is changed

Question

When I execute that style.top statement, the image doesn't want to change 600 px from the top.

document.getElementById("testing").onclick = function(event){
    document.getElementById("image").width=400;
    document.getElementById("image").style.top = "600px";
}

#testing{
    color:blue;
}

<p id="testing">
    
aewrfafffffffffffffffacvfav
</p>
    
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>

From my understanding, that should work. I don't know what's going on. In a nutshell, how can I change the position of an image with JavaScript? There's the position absolute thing, but not sure.

You will need to set the `position` style on the image - such as `position:relative;` or `position:absolute` — Darren Wainwright, Sep 16 '16 at 18:50
This:(document.getElementById("image").width=400;) changed the images width, so don't worry about the width thing. — learner, Sep 16 '16 at 18:50

Roope · Answer 1 · 2016-09-16T19:22:41.240

0

The top property by itself does absolutely nothing. The elements needs to be positioned as well. For example, position: relative or position: absolute.

The top, right, bottom, and left properties specify the position of positioned elements.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/position

An example where the image is positioned relative to the container and the top property is changed after clicking the paragraph:

document.getElementById("testing").onclick = function(event) {
  document.getElementById("image").style.top = "100px";
}

.container {
  position: relative;
}
img {
  position: absolute;
  width: 400px;
}

<div class="container">
  <p id="testing">aewrfafffffffffffffffacvfav</p>
  <img id="image" src="http://lorempixel.com/g/400/200/" />
</div>

edited Sep 16 '16 at 19:22

answered Sep 16 '16 at 18:51

Roope

4,469
2
27
51

Thank you. I do still need to learn a lot. I guess I have to learn to set position to absolute and change position like that. Any ideas how to do this via javascript? – learner Sep 16 '16 at 18:56
I'm trying things like document.getElementById("image").position = absolute; document.getElementById("image").top = "600px"; But this doesn't work, nothing happens. – learner Sep 16 '16 at 19:15
@learner Positioning is achieved by a CSS property `position`. You should really be using CSS for everything but the `top` change. – Roope Sep 16 '16 at 19:18
Thank you Roope. Javascript is probably unneccessary. Just playing around with it:) – learner Sep 16 '16 at 19:23
@learner See the example. But really, this is very basic stuff, so you should really check out codecademy.com and their HTML, CSS, and JS courses, that would be much more useful and a faster way to learn. – Roope Sep 16 '16 at 19:23

score 0 · Answer 2 · answered Sep 16 '16 at 18:54

The top, right, bottom, and left properties specify the position of positioned elements. -position^MDN

Your image element is not positioned, and as a result using top, right, bottom, or left will have no effect. In order to position an element without altering the flow of the document (which using fixed or absolute will do) you can use position: relative; and it will remain in the document flow while now being considered "positioned".

document.getElementById("testing").onclick = function(event){
    document.getElementById("image").width=400;
    document.getElementById("image").style.top = "600px";
}

#testing{
    color:blue;
}
#image{
    position: relative; /* <- positioning */
}

<p id="testing">
    
aewrfafffffffffffffffacvfav
</p>
    
<img id="image" src="katakana.jpg" alt="nothing" width="300"/>

What Is Positioning?
By default, elements flow one after another in the same order as they appear in the HTML source, with each element having a size and position that depends on the type of element, the contents of the element, and the display context for the element as it will render on the page. This default flow model for HTML layout doesn't allow a high level of control over the placement of elements on the page. By applying a small set of CSS attributes to the elements that are defined for the page, CSS can control the precise position of elements by giving exact coordinates. -About Element Positioning^MSDN

Thank you so far. I found this on the web: document.getElementById("image").position = absolute; But how do I change the Top position? document.getElementById("image").position = absolute; top="500px" . Sorry, I'M still new. — learner, Sep 16 '16 at 19:04
@learner - You can do that, but it isn't temporary. That will make the change permanent until altered elsewhere, and as a result you may as well just do it in css (also, after running the first time it will have no effect, so it is kind of wasteful). CSS is a powerful tool! Knowing when to use it is important, and it has a rather extensive set of features. Moving elements, transitioning, placement on the page... often these can be accomplished by a little css. If you can do it in css instead of JavaScript, it is probably better to go that route. — Travis J, Sep 16 '16 at 19:05
@learner - You can change the top position by using `document.getElementById("image").style.top = "500px;"`. — Travis J, Sep 16 '16 at 19:07
Thank you Travis and others. You're right, I wanted to do most things using javascript. I must learn css better I rate. — learner, Sep 16 '16 at 19:09

Image not moving when style.top is changed

2 Answers2