CSS placing elements without affecting one another dynamically using javascript - Stack Overflow

admin管理员组

文章数量:1405574

I was trying to create an image map tool as part of my project /

Full screen 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

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

Full screen result : http://jsfiddle/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

• javascript
• css
• scroll
• position

Share Improve this question Follow asked May 4, 2012 at 16:09 Jinu Joseph DanielJinu Joseph Daniel 6,3111717 gold badges6464 silver badges9393 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： CSS placing elements without affecting one another dynamically using javascriptStack Overflow