如何在 HTML 和 CSS 中使 1 张图片与另外 2 张图片重叠

Question

我想用我的 HTML 和 CSS 实现的是，在我的 HTML 部分我有 2 div classes，在div class 容器。我有 2 张图片，在我的 div class 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 为自己创建此在线作品集。

提前致谢。

Answer 1

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

Answer 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;
}

如何在 HTML 和 CSS 中使 1 张图片与另外 2 张图片重叠

How to making 1 image overlap 2 other images in HTML and CSS

html

css

bootstrap-4