Question

我需要在我的第一张照片上放置我的第二张照片（img id =＆＃34; stack＆＃34;）。我尝试过使用相对和绝对定位，但它似乎只是在彼此之下。

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

你忘记了octothorpe。

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

将一个图像放在另一个图像的顶部

1 个答案: