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

Groups > comp.lang.javascript > #22768

Re: Set image to the correct position over another image

Show all headers | View raw

"Evertjan." <exxjxw.hannivoort@inter.nl.net> skrev i meddelelsen 
news:XnsA2BCE8F4BE978eejj99@194.109.133.133...
> 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

You need to be schooled.
http://www.w3schools.com/css/css_positioning.asp


> 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