我們如何使用css樣式重疊兩個圖像？

Question

我在html表格中有一個圖像列表，需要在每個圖像上重疊一個小圖標。 我們如何使用z索引和定位來做到這一點？

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

您希望位於頂部的元素需要具有更高的z-index

因此，小圖標的z-index為2，圖像的z-index為1

例：

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

.images {
  z-index: 1;
}

Answer 3

你可以使用position:relative和set right:30px ， bottom:30px ，它會將它向上移動並向左移動30個像素。

CSS：

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

Answer 4

以下是關於您可以使用z-index的指南，請訪問https://developer.mozilla.org/en/understanding_css_z-index

關於定位的文章http://www.tizag.com/cssT/position.php