Как сделать div внутри другого div видимым

Question

Я хочу сделать видимым дочерний элемент div внутри родительского элемента div, если я укажу child div margin-top отрицательное значение.

Я пробовал с позицией: относительный и z-index, но это не похоже на работу.

Вот мой код:

HTML:

<div class="main-site">
  <div class="container">
    <div class="overlap top-border-radius">
      <div id="facultylist">
        <h1>Affordable Professional Web Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
      </div>
    </div>
  </div>
</div>

CSS:

#facultylist {
  position: relative;
}
.main-site {
  padding: 50px 0;
}
.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}
.overlap {
  position: relative;
  background: #fff;
  margin-top: -50px;
  margin-bottom: 20px;
}
.top-border-radius {
  border-top: #006af4 3px solid;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

Answer 1

Звучит так, будто вы хотите удалить overflow: hidden на .container:

#facultylist {
  position: relative;
}

.main-site {
  padding: 50px 0;
}

.container {
  width: 80%;
  margin: auto;
  /*overflow: hidden;*/
}

.overlap {
  position: relative;
  background: #fff;
  margin-top: -50px;
  margin-bottom: 20px;
}

.top-border-radius {
  border-top: #006af4 3px solid;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

<div class="main-site">
  <div class="container">
    <div class="overlap top-border-radius">
      <div id="facultylist">
        <h1>Affordable Professional Web Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
      </div>
    </div>
  </div>
</div>