如何将图像堆叠在另一个顶部

Question

我是CSS的初学者，我有几个图像，并且尝试将图像堆叠在另一个顶部。 我正在使用框架引导程序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;
}

请参见jsfiddle Here

Answer 1

背景和女人与两个徽标位于不同的div中，因此，它们不会像您所希望的那样堆叠在一起。

这是修改后的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中，因为它应该位于其余元素的上方。

更新：根据上面的评论，这是一个经过修饰的小提琴链接，上面的html代码也有所更改。

这是您修改过的fiddle