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.

Answer 1

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> 

Answer 2

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