CODEWITHSUNDEEP
htmlcssimage
Burhan Mughal
Burhan Mughal

Reputation: 818

Placing image on another image in Javascript

I am working in javascript. I am facing an issue i.e. I want to place an image on another image. MY Code is follows:

<div>
  <img src="1.jpg" style="z-index:1;"/>
  <img src="2.png" style="z-index:2; left:-100px;"/>
</div>

The problem is when i run the code it places image on the right bottom corner of the DIV but not on the image. Any help would be appreciated.

Upvotes: 0

Views: 1667

Answers (4)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Working DEMO

Use position: absolute in CSS:

img { position:absolute; }

<div>
  <img src="1.jpg"/>
  <img src="2.png"/>
</div>

Note: You don't need to specify z-index if you want last image to appear on top. This is default browser behaviour.

Upvotes: 1

rgdigi
rgdigi

Reputation: 1747

You need to add the position property to the image style, e.g. ->

position:relative

https://developer.mozilla.org/en-US/docs/CSS/position

Also, this isn't javascript, it's CSS

Upvotes: 0

Mario Bellart
Mario Bellart

Reputation: 504

try:

<div style="position:relative">
  <img src="1.jpg" style="z-index:1;"/>
  <img src="2.png" style="z-index:2; position:absolute;top:0;left:0;"/>
</div>

Upvotes: 0

Norbert Pisz
Norbert Pisz

Reputation: 3440

 <div>
  <img src="1.jpg" />
  <img src="2.png" style=" left:-100px; position:relative"/>
</div>

Upvotes: 0

Related Questions