Html 引导：如何在另一个映像上设置映像

在我的页面中，我有两个图像，我想在另一个图像上显示其中一个，这是我的代码，如何设置图像：

<div class="profile-image img-responsive">
   <img src="images/pro.png"/>
   <img src="images/2.png" class="img-circle">
</div>

我想在左侧和底部设置

2.png

，如下所示：

---

我如何才能做到这一点？

将您的css更新到这个位置

.img-circle {
border-radius: 50%;
position: relative;
top: -69px;
left: 10px;
}

---

以下代码将在第一个图像上显示第二个图像。所有图像和图像面板均响应良好

1.CSS

2.HTML

<div class="profile-img">
  <img class="img-responsive" src="images/pro.png" />
  <img class="img-circle img-responsive" src="images/2.png" />
</div>

---

@bnuhero的答案很好，我会稍微修改一下

首先，基于jsfiddle，将两个图像封装在相对div中。这将允许放置在顶部的图像（定义为“绝对”时）相对于父div放置，而不是相对于整个窗口

<div class="header-image">
        <div class="profile-image" style="margin: 50px auto;">
            <img src="http://s9.postimg.org/41fwo4k4v/pro.png" class="img-responsive"/>
            <img src="http://s24.postimg.org/on764040x/image.png" class="img-circle img-responsive img-on-top">
        </div>
        </div>
</div>

---

更新的jsfiddle位于

请参见：@bnuhero:我编辑了我的代码，面板和图像没有响应。我如何修复它？谢谢，以及如何设置

image.png

有响应？因为现在它没有反应。

<div class="header-image">
        <div class="profile-image" style="margin: 50px auto;">
            <img src="http://s9.postimg.org/41fwo4k4v/pro.png" class="img-responsive"/>
            <img src="http://s24.postimg.org/on764040x/image.png" class="img-circle img-responsive img-on-top">
        </div>
        </div>
</div>

.header-image {
position:relative;
}

.img-on-top {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}