如何在 HTML 和 CSS 中使 1 个图像与 2 个其他图像重叠答案

【问题标题】：How to making 1 image overlap 2 other images in HTML and CSS如何在 HTML 和 CSS 中使 1 个图像与 2 个其他图像重叠
【发布时间】：2021-12-31 04:41:10
【问题描述】：

我试图用我的 HTML 和 CSS 实现的是，在我的 HTML 部分中，我有 2 个 div 类，在 div 类容器中。我有 2 张图片，在我的 div 类 container-sm 中，我只有一个背景，文本将在其中。

我想要做的是让第一个图像位于顶部，容器位于底部，个人资料图片位于它们中间，请参阅下面的代码：

HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Sheldon's Online Portfolio</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="mystyle.css" rel="stylesheet">
  </head>
  <body>
    <div class = "navbar navbar-default navbar-fixed-top">
      <nav class = navlist>

        </span>
      </nav>
    </div>

      <div class = "container">
          <img src= "Images used/photo-1542831371-29b0f74f9713.jpeg" class="img-fluid" alt = "No Image"/>
          <div class = "profile-pic">
            <img src= "Images used/Profile Pic.png" class="pro-pic" alt = "No Image"/>
          </div>
      </div>

      <div class = "container-sm">

      </div>
  </body>
</html>

CSS

.navbar
{
  background-color: #2A3956;
  box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
  border: 1px solid #02d3f6;
}

.navbar-default
{
  border:0;
}

.container
{
  padding: 0px;
  margin: 0px;
}
.img-fluid
{
  border: 1px solid #02d3f6;
  max-width: 100%;
  height: auto;
}

.container-sm
{
 background-color: #2A3956;
 box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
 border: 1px solid #02d3f6;
 min-height: 260px;
}

.profile-pic
{
  position: absolute;
}
.pro-pic
{

  border: 1px solid #02d3f6;
  max-width: 50%;
  height: auto;

}

我确实尝试将位置设置为绝对位置并尝试使用 z-index 1 以便个人资料图片可以位于两者之上，但它没有得到我想要的结果。

另外，请注意，我正在使用 bootstrap 为自己创建这个在线作品集。

提前谢谢你。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

尝试创建一个放置在页面流中的相对div；诀窍是让亲戚和绝对正确。然后是 z-index

【讨论】：

【解决方案2】：

我设法解决了这个问题，您可以在下面看到我的代码中的更改：

HTML

<div class = "container">
        <div class = "profile-pic">
          <img src= "Images used/Profile Pic.png" class="pro-pic" alt = "No Image"/>
        </div>
          <img src= "Images used/photo-1542831371-29b0f74f9713.jpeg" class="img-fluid" alt = "No Image"/>

CSS

.container-sm
{
 background-color: #2A3956;
 box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
 border: 1px solid #02d3f6;
 min-height: 340px;
}

.profile-pic
{
  position: absolute;
}
.pro-pic
{

  border: 1px solid #02d3f6;
  max-width: 50%;
  margin-left: 90px;
  border-radius: 100px;
  margin-top: 149px;
}
.container-sm h1
{
  color:#07DD45;
  margin-top: 96px;
  font-size:25px;
  margin-left: 127px;
}

【讨论】：