how to find position of an element within a div

Question

hi,

how to find position of an element within a div

eg:

 <div style="width:100px;overflow:hidden">
<img id="img_1" src=""/>
<img id="img_2" src=""/>
</div>
<input type="button" onclick"fnscroll()">

consider the second image is hidden.

how to bring that second img in the visible area of the div? at a single button click.

how to find the img position ie, x-y position

using javascript

Answer 1

Replace <ELEMENT> with element in DOM Document To find x,y coordinates

var x=<ELEMENT>.style.left
var y=<ELEMENT>.style.top

Use same properties to bring image to visible area

And if you want absolute position of image loop over it till you find body tag

Answer 2

If you want to position every image in the div on the same place, you might want to consider setting the position style to absolute and alter the z-index of the images via javascript.

Example of the CSS:

div img { position: absolute; top: 0; left:0; }
#img_1 {z-index: 1;}
#img_2 {z-index: 2;}