我们如何使用css样式重叠两个图像？

Question

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

Answer 1

 .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" /> 

Answer 2

The element you want to be on top needs to have a higher z-index

So the small icon would have a z-index of 2 and the images would have a z-index of 1

Example:

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

.images {
  z-index: 1;
}

Answer 3

You could use position:relative and set right:30px , bottom:30px , that would shift it up and left by 30 pixels.

CSS:

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

Answer 4

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

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