Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #22741

Re: Set image to the correct position over another image

Show all headers | View raw

Kanobi <nome.geirr@gmail.com> wrote on 21 jan 2014 in
comp.lang.javascript: 

> I have a map image and want to position a cross over it.
> 
> Both are currently in a div container with position set to static.
> Each image is then inside a div.
> 
> Everything works fine if I set the position for both to absolute.
> However I want them to inherit the position of the container. When I set
> the position of the image divs to relative the map displays fine, but
> the cross is positioned outside the map and to the right. 
> 
> Any ideas?
> 
> Here is a cutout of the code:
> <div id="marked">
> <div id="container" style="position: static; white-space: nowrap;">
>      <div id="map" style="position: relative; left: 0px; top: 0px;
>      z-index:1;"><img
>      src="anatomi/netter-neruo2002/saggitalbrain-insitu.jpg"></div> 
>      <div id="cross" style="position: relative; left: 302px; top: 155px;
>      z-index:2;"><img src="imageOverlay_files/dots/d9.png"></div> 
>      </div>
> </div>

You should read the css position specs again. There is no top and left on a 
relative position, a relative position is only the reference where absolute 
opsitioned elements are contained in and are relative to. Position static is 
just the default for a webpage, there are very few reasons to use that.

Try:

<div style="position:relative;">
  <img src="cross.jpg" 
      style="position:absolute;width:300px;height:200px;z-index:4;">
  <img src="original.jpg" 
      style="position:absolute;width:300px;height:200px;z-index:3;">
</div>



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Set image to the correct position over another image Kanobi <nome.geirr@gmail.com> - 2014-01-21 13:36 -0800
  Re: Set image to the correct position over another image "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-21 22:54 +0100
    Re: Set image to the correct position over another image Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-21 23:23 +0100
      Re: Set image to the correct position over another image Tim Streater <timstreater@greenbee.net> - 2014-01-21 22:48 +0000
        Re: Set image to the correct position over another image Andrew Poulos <ap_prog@hotmail.com> - 2014-01-22 11:23 +1100
    Re: Set image to the correct position over another image nome.geirr@gmail.com - 2014-01-22 08:13 -0800
    Re: Set image to the correct position over another image Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2014-01-22 22:06 +0100
    Re: Set image to the correct position over another image "se" <se@no-one.here> - 2014-01-24 00:17 +0100
      Re: Set image to the correct position over another image "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-24 10:29 +0100
        Re: Set image to the correct position over another image Osmo Saarikumpu <osmo@weppipakki.com> - 2014-01-26 14:11 +0200
  Re: Set image to the correct position over another image Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-21 23:17 +0100
  Re: Set image to the correct position over another image Danny <dann90038@gmail.com> - 2014-01-22 12:32 -0800
    Re: Set image to the correct position over another image nome.geirr@gmail.com - 2014-01-22 13:08 -0800
      Re: Set image to the correct position over another image Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-23 00:41 +0100
  Re: Set image to the correct position over another image lingmaaki@gmail.com - 2014-04-21 00:04 -0700
    Re: Set image to the correct position over another image Ed Jay <edMbj@aes-intl.com> - 2014-04-21 07:07 -0700

csiph-web