使用CSS重疊兩張透明圖像

我試圖在其左上角的div內重疊兩張透明圖像（具有相同的大小/尺寸）。我試過了：使用CSS重疊兩張透明圖像

<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 
<div style="margin:20px;"> 
<div id="main" style="overflow:hidden;background-color:red;width:400px;height:400px;border:3px solid blue;"> 
<img src="myimage1.png" style="position:relative;top:0px;left:0px;z-index:0;"/> 
<img src="myimage2.png" style="position:relative;top:0px;left:0px;z-index:10;"/> 
</div> 
</div> 
</body> 
</html>

但是這並不奏效。相反，這兩個圖片在父代div內連接。

來源

2010-04-04 Pierre

儘量讓#main擁有position:relative，然後更改兩個<img>的使用position:absolute。

來源

2010-04-04 16:13:49 kennytm

打我給它 - 在這裏是一個活生生的例子http://jsbin.com/unogu3/（我偏移圖像顯示它們重疊 - 顯然你會有點不同） – 2010-04-04 16:18:38

使第二圖像position:absolute和#main position:relative

來源

2010-04-04 16:14:50 carillonator

剛一說明：

position:relative和position:absolute指最接近的父母，其中有position:relative或position:absolute的0;0。如果您的div都沒有，則它指的是文檔（body）的0;0（頂部;左側）。

position:relative - 頂部和左側是指元件的自然流值之間的差異 - 即，如果「圖像」具有自然流動x 1500和y 1200，top: 150px; left: -50px;將其移動到x: 1450; y: 1350;

position:absolute - 頂部和左對齊與最接近的p:r或p:a父元素的0;0無關，自然流量 - 例如，（在僞html/css中）：

<div style="relative/absolute"> 
    <img absolute="top:-20px; left: 150px;"> 
</div>

圖像將從父div的左上角向右20px和150px。

這就是說，你想要你的容器相對和絕對，你的堆疊圖像應該是position:relative和top: 0; left: 0;。如果你想更好地控制分層，不要忘記設置z-index。

-A

來源

2010-04-04 16:20:59

使用CSS重疊兩張透明圖像

回答

相關問題