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

What I am trying to achieve with my HTML and CSS is, in my HTML section I have 2 div classes, in div class container. I have 2 images and in my div class container-sm I just have a background that text is going to be in.

What I am trying to do is have the first image sit on the top, and container sits at the bottom of that and the profile pic sits over both of them in the middle, please see my code below:

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"  alt = "No Image"/>
          <div class = "profile-pic">
            <img src= "Images used/Profile Pic.png"  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;

}

I did try making the position absolute and tried the z-index 1 so that the profile pic can sit on top of both of them, it is not getting the desired results I am looking for.

Also just so that you are aware, I am using bootstrap to create this online portfolio for myself.

Thank you in advance.

CodePudding user response：

Try create a relative div that is placed in the flow of the page; The trick is to get the relatives and absolutes correct. And then z-index

CodePudding user response：

I managed to solve the issue, you can see the changes in my code below:

HTML

<div class = "container">
        <div class = "profile-pic">
          <img src= "Images used/Profile Pic.png"  alt = "No Image"/>
        </div>
          <img src= "Images used/photo-1542831371-29b0f74f9713.jpeg"  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;
}