我們如何使用css風格重疊兩張圖片？

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

2009-11-23 random

閱讀本可能幫助你 http://stackoverflow.com/questions/4863644/overlap-across-width-of-two-divs – digital 2012-11-21 10:23:18

<html> 
<head> 
    <style type="text/css"> 
     .under 
     { 
      position:absolute; 
      left:0px; 
      top:0px; 
      z-index:-1; 
     } 
     .over 
     { 
      position:absolute; 
      left:40px; 
      top:10px; 
      z-index:-1; 
     } 
    </style> 
</head> 

<body> 
    <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" /> 
</body> 
</html>

來源

2009-11-23 11:48:31

好一個恩... :) – 2011-06-27 13:01:17

優秀的css魔術片 – Cid 2012-12-09 11:54:08

您可以使用position:relative並設置right:30px,bottom:30px，這會將它向上移動並向左移動30個像素。

CSS：

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

來源

2009-11-23 11:38:11 noirenex

你想在頂部的元素都需要有較高的z-index

所以小圖標將有2 的z-index和圖像將有1

實施例的z索引：

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

.images { 
    z-index: 1; 
}

來源

2009-11-23 11:40:04 zeckdude

-1

這裏是一個指南，瞭解有關您可以使用的z-index這裏 https://developer.mozilla.org/en/understanding_css_z-index

一篇關於定位 http://www.tizag.com/cssT/position.php

來源

2009-11-23 11:40:39 Daniel

我們如何使用css風格重疊兩張圖片？

回答

相關問題