Geek Answers Handbook

How can we overlap two images using css style?

I have a list of images in the html table and you need to put a small icon on each image. How can we do this using z-index and positioning?

+7
source share
4 answers

.under {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

.over {
  position: absolute;
  left: 40px;
  top: 10px;
  z-index: -1;
}
<img src="https://tafttest.com/184x46.png" width="184" height="46" class="under" />
<img src="https://tafttest.com/100x84.png" width="100" height="84" class="over" />
Run codeHide result
+18
source

The item that should be on top should have a higher z index

Thus, a small icon will have a z-index of 2 and images will have a z-index of 1

Example:

.icon {
  z-index: 2;
  position: relative;
  left: 30px;
  top: 30px;
}

.images {
  z-index: 1;
}
+4
source

You can use position:relativeand set right:30px, bottom:30pxwhich will shift it and stay at 30 pixels.

CSS

.icon{
position:relative;
right:30px;
bottom:30px;
}
0
source

Here is a guide on how you can use z-index and here https://developer.mozilla.org/en/understanding_css_z-index

article on positioning http://www.tizag.com/cssT/position.php

-1
source

More articles:


All Articles