HTML/CSS/JS Elements positioning

Question

have a problem. At first look at this HTML

<div id="map" style="background-image: url(map.png); width: 700; height: 600;">
  <div id="dot1" onMouseOver=expand(this) onMouseOut=shrink(this)></div>
  <div id="dot2" onMouseOver=expand(this) onMouseOut=shrink(this)></div>
</div>

and I have next JS code

function expand(element) {
  element.style.height = '100px';
}
function shrink(element) {
  element.style.height = '20px';
}

IDEA is: imagine map and multiple "red dots" on it on mouse over it's expanding to 100x100, getting white background and text inside about this spot. Only one problem is - how to make other dots stick to the map while one of them is expanded?

For example user is looking on "top" spot, and every else under current one is moving down for ~100px (exactly amount of expanding 1st one)

It looks fine at position : relative but only while you're not looking inside.
Absolute/fixed? - Bad option. I have to calculate user screen size / client size and place every "dot"
OR calculate MAP's left/top offset and make every dot map_offset_Left+myLeft

Maybe there is a way to set them dependent from MAP div and be independent from each other?

Ty

I have no clue what you want. But if the #map has position:relative then all the divs inside of it can be position:absolute — js1568
– js1568, Commented Jun 13, 2012 at 12:54
what if you create a container with relative position, and dots with absolute position inside that container ! — Al-Mothafar
– Al-Mothafar, Commented Jun 13, 2012 at 12:56

Quentin · Accepted Answer · 2012-06-13 12:53:40Z

1

Set the map to position: relative, its absolutely positioned descendants will then be positioned with respect to the map and not the window.

answered Jun 13, 2012 at 12:53

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Collectives™ on Stack Overflow

HTML/CSS/JS Elements positioning

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related