[RESOLVED] Layered blocks inside scrolling container

[joflo]

Hi,

I'm trying to layer some content divs over an image, all viewed through a scrolling div.

It's basically a map (the image) with points (the divs), viewed through a scrolling window (scrolling div).

I now realise that positioning the divs absolutely brings them out of the container.

So I tried to position the divs relatively but couldn't find a way of avoiding gaps inside the window where the divs displace the image.

<div id="scrollview" style="width: 400px; height: 400px; overflow: scroll;">
	<img src="map.gif" width="4000" height="4000"/>
	<div id="item1" class="mappoint"></div>
	<div id="item2" class="mappoint"></div>
</div>

What CSS would I need to make that work?

Thanks

[mitya]

I now realise that positioning the divs absolutely brings them out of the container.

Position absolute is relative (hence common confusion) to the first parent element found that has position relative.

Give #scrollview position: relative then you can use position: absolute on your inner DIVs, so for example giving one of them left: 0 will position it in on the left edge of scrollview, not of the page.

See my example at www.durexhcp.co.uk/contact_us for reference.

[joflo]

Thanks, that really helped demystify it lol the guesswork was killing me