Html 如何将图像堆叠在另一个图像上

我是css的初学者，我有几个图像，我试图将图像堆叠在另一个图像之上。 im使用框架引导4.1

示例

我想要的预期结果：

问题

我需要第二张图片（女性）在div的底部

这是我的作品

.bg-light{
    background-color: #fff !important;
}
.lia-main{
    opacity: 1;
    position: absolute;
    margin:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
.lia-char{
    width:37%;
    height:auto;
    right: 0;
    vertical-align : bottom;
}

---

请参见JSFIDLE

背景和女性位于两个徽标之外的一个单独的

分区

，因为这个原因，它们没有按照您的意愿堆叠在一起

以下是修改后的HTML代码：

<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">       

<img src="http://i63.tinypic.com/2nb53ba.jpg" class='img-fluid position-absolute lia-main'> 

<div class="front">
    <div class="container">
          <a class="navbar-brand" href="#">
            logo
          </a>
          <a class="navbar-brand pull-right" href="#">
            logo
          </a>
  </div> 

        <div class="woman">
            <img src="https://preview.ibb.co/jW521y/lia2.png" class='float-right img-fluid lia-char pull-right' >  
        </div>  

</div>

女人被放置在一个div中，因为它应该“高于”其他元素

更新：根据上面的评论，这里有一个修改过的fiddle链接，上面的html代码也有变化。

---

这是你修改过的

你能检查一下这把小提琴并告诉我这是你需要的吗？当我在我的浏览器中尝试背景不是100%的宽度和高度。导航栏部分是不同的组件不要与导航栏堆叠你能在代码中添加导航栏组件吗..我的意思是导航栏@mohamad igbal中缺少一些东西-这是一个n更新的提琴-我已经更新了我的js提琴一个我期望的新图像。请检查@Aravinds检查这个提琴