html - 如何在css中将一个图像堆叠在另一个图像上？

Question

我想将图像 b 堆叠在图像 a 上，图像 b 将自动与图像 a 一起移动，无论它移动到哪里。这是我的代码

  <div id="down">
  <img id="yes" src="http://img.wallpaperstock.net:81/hi%2c-loser-wallpapers_17839_1024x768.jpg" >

  <div id="up">
  <img id="no" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/SMirC-hi.svg/320px-SMirC-hi.svg.png">
  </div>

 </div>

这是我的CSS：

 #down{

         float: right;

     }


     #up{

        position: absolute;
        top: 10px;
        left: 10px;

     }

我认为图像 b 也将与图像 a 一起浮动，并且绝对位置距离图像 b 的顶部和左侧 10px 的绝对位置。为什么不是那样？？？希望你明白我的意思

Answer 1

首先，正确添加您的图像 imagea.png 或 imagea.jpg 什么？

在此处添加 z-index

#up{
z-index:1;
position: absolute;
top: 10px;
left: 10px;

}

并添加这个

#down{
     z-index:0;
         float: right;
     }

Answer 2

我会使用position:absolute而不是浮动。

这是工作示例：JSBin 中的位置

据我了解，定位float不起作用left，right只有absolute定位起作用。如果我错了，请有人纠正我。