我试着创建一个网格布局，遇到了这个问题。我想把div（配置文件图像）和span固定在div（ Package 器-配置文件-介绍）内部。我的工作是

#main-profile{
    margin: 0;
    profile: 0;
}
.profile-container{
    max-width:1280px;
    margin: 0 auto;
    box-sizing: border-box;
}
.wrapper-profile{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas: "intro details details details";
    grid-gap: 0.5em;
}
.wrapper-profile .wrapper-profile-intro{
    grid-area: intro;
}
.wrapper-profile .wrapper-profile-details{
    grid-area: details;
}
.wrapper-profile .wrapper-profile-intro,.wrapper-profile .wrapper-profile-details{
    background: #fff;
    padding: 0 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.profile-header{
    margin: 0;
    padding: 0;
}
.profile-header img{
    display: cov0er;
    width: 100%;
    height: 200px;
    opacity: 0.6;    
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.wrapper-profile-intro .profile-image{
      display:flex;
      justify-content:center;
      align-items-center;
}
.wrapper-profile-intro .profile-image img{
  flex-wrap: wrap;
  pointer-events: none;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  float: none;
  display: block;
  object-fit: fill;
  margin-bottom: 5px;
  border: 4px solid #fff;
  box-shadow:1px 3px 2px rgba(0,0,0,0.18);  
  -webkit-box-shadow:1px 3px 2px rgba(0,0,0,0.18);
  -moz-box-shadow:1px 3px 2px rgba(0,0,0,0.18);
}
.wrapper-profile-intro .profile-image span{
  position:absolute;
  background: #2afa6a;
  width:16px;
  height:16px;
  border-radius:50%;
  bottom:3px;
  left:11px;
  border:2px solid #fff;
}
@media(max-width: 768px){
    .wrapper-profile{
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        grid-template-areas: "intro"
        "details";
    }
}

<div id="main-profile">
    <div class="profile-header">
        <img src="https://img.freepik.com/free-photo/abstract-grunge-decorative-relief-navy-blue-stucco-wall-texture-wide-angle-rough-colored-background_1258-28311.jpg?w=2000" alt="profile-header">
    </div>
    <div class="profile-container">
        <div class="wrapper-profile">
            <div class="wrapper-profile-intro">
                <div class="profile-image">
                    <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png">
                    <span></span>
                </div>
            </div>
            <div class="wrapper-profile-details">
                <p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
            </div>
        </div>
    </div><!--profile-container-->
</div>

我试过把外部的div设置为绝对位置和相对位置，但是不起作用。看看我怎么把div的profile-image固定在div里面，wrapper-profile-intro。