如何将图像堆叠在另一个之上答案

【问题标题】：how to stacking image on top of another如何将图像堆叠在另一个之上
【发布时间】：2018-07-22 14:46:38
【问题描述】：

我是 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

【问题讨论】：

你能检查一下这个小提琴jsfiddle.net/Aravi/j2qLdt75，让我知道这是你需要的
当我在浏览器中尝试时，背景不是 100% 的宽度和高度。并且导航栏部分是不同的组件，不要与导航栏堆叠
你能在代码中添加你的导航栏组件吗..我的意思是导航栏中缺少一些东西@mohamad igbal - 这是一个更新的小提琴 - jsfiddle.net/Aravi/j2qLdt75
我已经更新了我的 js 小提琴一个我所期望的新图像。请检查@AravindS
检查这个小提琴jsfiddle.net/Aravi/82om610w

标签： html css responsive-design bootstrap-4

【解决方案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 中，因为它应该“高于”其余元素。

更新：这是根据上面的 cmets 修改的小提琴链接，上面的 html 代码也有变化。

这是你修改后的fiddle

【讨论】：