將另一張圖片置於另一張圖片上

Question

我需要將第二張圖片（img id =「stack」）放在我的第一張圖片上。我試過使用相對和絕對定位，但它似乎低於對方。

這是JS Fiddle

HTML

<div id="imgpos"> 
    <img id="bkgr" src="http://upload.wikimedia.org/wikipedia/commons /f/fd/Moon_in_Sunrise_Sky_2.jpg" width="400" height="400"> 
    <img id= "stack" src="http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG" width="200" height="150">  
</div> 

CSS

#imgpos 
{ 
    position: relative; 
    left: 30px; 
} 

#imgpos bkgr 
{ 
    position: absolute; 
    z-index: 1; 
} 

#imgpos stack 
{ 
    position: absolute; 
    z-index: 2; 
    } 

Answer 1

你忘了井號。

#imgpos #bkgr 
{ 
    position: absolute; 
    z-index: 1; 
} 

#imgpos #stack 
{ 
    position: absolute; 
    z-index: 2; 
} 

由於ID是唯一的反正，你可以省略#imgpos，太：

#bkgr { 
    position: absolute; 
    z-index: 1; 
} 

#stack { 
    position: absolute; 
    z-index: 2; 
} 

而且，由於圖像是按照正確的順序反正，你可以省略的z-index，也：

#bkgr { 
    position: absolute; 
} 

#stack { 
    position: absolute; 
} 

而且由於現在的規則是一樣的，你可以將它們組合起來：

#bkgr, #stack { 
    position: absolute; 
}