How to make div inside another div visible

I want to make a child div inside parents div visible if I give the child div margin-top negative value.

I have tried with position:relative and z-index, but it doesn't seems work.

Here are my code:

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

1 answer

  • answered 2019-05-15 03:21 Obsidian Age

    It sounds like you're looking to remove overflow: hidden on .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>