CSS placing elements without affecting one another dynamically using javascript

Question

I was trying to create an image map tool as part of my project http://jsfiddle.net/MBThE/12/

Full screen result : http://jsfiddle.net/MBThE/12/embedded/result/

I tried to place the links as divs and positioning using css.. But the problem is that adding or deleting new hot spots reults in repositioning of other elements..I found the solution for this as position:fixed for hot spot divs ..But this makes the hotspots remain there itself even if user scrolls down or up....So is there any way to find the number of pixels scrolled up or down using javascript and trigger an event when scrolling happens,so that i can increment or decrement the divs positions according to scrolling ?

I consider another alternative as HTML5 canvas....But that results in unwanted resizing of image... So is there any way to make the divs does not affect each other but also place them inside the container div?

Note:- click 'add hot spot' button and click on the image to add hotspot..hover the hotspot to edit the hotspot

ehudokai · Accepted Answer · 2012-05-04 16:14:39Z

6

Yes, position:absolute will position absolutely based off of the closest parent that is either position:absolute or position:relative. So you could use the following to create a parent and then position within it.

<div style="position:relative" id="parentDiv">
     <div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
     <div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>

hope that helps

answered May 4, 2012 at 16:14

ehudokai

1,92612 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jinu Joseph Daniel Over a year ago

yurekka...that solved the problem.......ehudokai rockzzz....Thanks for that answer

Collectives™ on Stack Overflow

CSS placing elements without affecting one another dynamically using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related