Image goes under the div and I can not put it on div

Question

I tried to put image on div but don't really know how to do it I don't know how to put image in code so it all could be in one div. When I tried putting it, it ruined the text. I tried looking up solution on youtube but found nothing

Here is how it suppose to look

And here how it actually looks

Here's the code:

.our_teachers {
  height: 853px;
}

.teacher_photo {
  position: absolute;
  margin-left: 50px;
  padding-top: 20px;
}

.teacher_info_box {
  position: absolute;
  width: 900px;
  height: 400px;
  margin-left: 340px;
  background: #FFFFFF;
  box-shadow: 0px 4px 85px 6px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
}

.checkmark {
  padding: 6px 7px;
  width: 20px;
  height: 20px;
}

.teacher_info {
  margin-left: 210px;
}

.teacher_name {
  position: absolute;
  width: 475px;
  height: 46px;
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
}

.teacher_prof {
  position: absolute;
  width: 205px;
  height: 34px;
  margin-top: 85px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  color: #515151;
}

.teacher_facts {
  margin-top: 130px;
  margin-left: 210px;
}

.teacher_fact {
  display: flex;
  padding: 5px 0;
}

.teacher_fact p {
  margin: 0 0;
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
}

.teacher_quote {
  position: absolute;
  width: 636px;
  height: 82px;
  text-align: center;
  font-family: Poppins;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  margin-left: 160px;
}

<section class="our_teachers">
  <img class="teacher_photo" src="Our Teachers/teacher photos/Teacher Photo.png">
  <div class="teacher_info_box">
    <div class="teacher_info">
      <p class="teacher_name">Sasha</p>
      <p class="teacher_prof">Physics teacher</p>
    </div>
    <div class="teacher_facts">
      <div class="teacher_fact">
        <img class="checkmark" src="Our Teachers/Icon/checkmark.png">
        <p>In ac tortor in augue vulputate pretium eget non tellus.</p>
      </div>
      <div class="teacher_fact">
        <img class="checkmark" src="Our Teachers/Icon/checkmark.png">
        <p>Nunc placerat tortor id bibendum aliquam.</p>
      </div>
      <div class="teacher_fact">
        <img class="checkmark" src="Our Teachers/Icon/checkmark.png">
        <p>Lorem ipsum dolor sit amet, consdio adipizawarodo.</p>
      </div>
    </div>
    <div class="teacher_quote">
      <p>"Neque porro quisquam est qui dolorem ipsum<br> quia dolor sit amet, consectetur, adipisci velit..."</p>
    </div>
  </div>
</section>

Answer 1

Use z-index for precedence:

.our_teachers {
  height: 853px;
}

.teacher_photo {
  position: absolute;
  padding-top: 20px;
  width: 40%;
  height: 300px;
}

.teacher_info_box {
  position: absolute;
  width: 900px;
  height: 400px;
  margin-left: 20%;
  background: #FFFFFF;
  box-shadow: 0px 4px 85px 6px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  z-index: -1; /* here */
}

.checkmark {
  padding: 6px 7px;
  width: 20px;
  height: 20px;
}

.teacher_info {
  margin-left: 210px;
}

.teacher_name {
  position: absolute;
  width: 475px;
  height: 46px;
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
}

.teacher_prof {
  position: absolute;
  width: 205px;
  height: 34px;
  margin-top: 85px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  color: #515151;
}

.teacher_facts {
  margin-top: 130px;
  margin-left: 210px;
}

.teacher_fact {
  display: flex;
  padding: 5px 0;
}

.teacher_fact p {
  margin: 0 0;
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
}

.teacher_quote {
  position: absolute;
  width: 636px;
  height: 82px;
  text-align: center;
  font-family: Poppins;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  margin-left: 160px;
}

<section class="our_teachers">
  <img class="teacher_photo" src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
  <div class="teacher_info_box">
    <div class="teacher_info">
      <p class="teacher_name">Sasha</p>
      <p class="teacher_prof">Physics teacher</p>
    </div>
    <div class="teacher_facts">
      <div class="teacher_fact">
        <img class="checkmark" src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
        <p>In ac tortor in augue vulputate pretium eget non tellus.</p>
      </div>
      <div class="teacher_fact">
        <img class="checkmark" src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
        <p>Nunc placerat tortor id bibendum aliquam.</p>
      </div>
      <div class="teacher_fact">
        <img class="checkmark" src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg">
        <p>Lorem ipsum dolor sit amet, consdio adipizawarodo.</p>
      </div>
    </div>
    <div class="teacher_quote">
      <p>"Neque porro quisquam est qui dolorem ipsum<br> quia dolor sit amet, consectetur, adipisci velit..."</p>
    </div>
  </div>
</section>