将一张图像放在另一张图像之上[关闭]

【问题标题】：Place one image on top of the other [closed]将一张图像放在另一张图像之上[关闭]
【发布时间】：2014-07-07 16:40:19
【问题描述】：

我需要将我的第二张图片 (img id="stack") 放在我的第一张图片之上。我尝试过使用相对定位和绝对定位，但它似乎在彼此下方。

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;
  }

【问题讨论】：

标签： html css image positioning

【解决方案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;
}

【讨论】：

TIL octothorpe ==磅符号
谢谢@minitech。现在效果非常好。