Div Over Another Div Already inside a Div?

Question

I'm trying to make special title treatment Div go over a little bit or give the illusion of going out of its parent div like in the second picture I have tried many things but I need someone who can help me I'm too dumb in this case scenario :(

What I want:

What I have:

The current code:

<header class="bgg">
  <div class="container h-100">
    <div class="row h-100 align-items-center">

      <div class="card text-white border-light bg-dark col-lg-3">
        <div class="cattitle">
          <center><a href="<?php echo URL; ?>forsale" class="cata">
                    FOR SALE</a></center>
        </div>
        <div class="card-body">
          <ul class="">
            <li><a href="#">Automobiles</a></li>
            <li><a href="#">Appliances</a></li>
            <li><a href="#">Baby & Kids</a></li>
            <li><a href="#">Books & Magazines</a></li>
            <li><a href="#">Cell Phones & Tablets</a></li>
            <li><a href="#">Computers</a></li>
            <li><a href="#">Electronics</a></li>
            <li><a href="#">Furniture</a></li>
            <li><a href="#">Motorcycles</a></li>
            <li><a href="#">Tools</a></li>
          </ul>
        </div>
        <a href="#" class="btn btn-sm btn-primary morelink">More</a>
      </div>



      <div class="card text-center col-lg-12 mt-4 selectionbox">
        <div class="card-header">
          <ul class="nav nav-pills card-header-pills">
            <li class="nav-item">
              <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>


    </div>
  </div>
</header>

<!-- Page Content -->
<div class="container">

  <div class="row">

Answer 1

Here is a demo of how it can be done. In between the top div (.bgBlue) and the bottom div (.theCards), I added a .flyover div that sits atop the other two divs, as you requested.

The magic is to style the middle (flyOver) div as follows:

z-index: 1 ==> raises the flyover div up above the other two divs (which both have the default z-index value of 0)
float: left ==> this takes it out of the flow, allowing the bottom .theCards div to nestle up against the top div
top: -50px ==> moves up the flyOver div by 50px (overlapping the top div)
height: 50px ==> this is important. The div INSIDE this one (.flyIn) is 100px - so it will spill out of this div by 50px, overlapping the bottom div by 50px. Since this div already was moved up 50px (to overlap the top div), and the inner div (.flyIn) is 50px longer than this div, the over-all effect is as you requested.

* {position: relative;}
span{display:inline-block;width:90vw;color:white;text-align:right;padding-right:30px;border:1px solid yellow;}
.flex-parent{
  display:flex;
  width: 85%;
  margin:0 auto;
}
.bgBlue{
  height:250px;
  background: rgb(0,92,93);
  background: linear-gradient(0deg, rgba(0,92,93,1) 0%, rgba(9,9,121,1) 150%);
}
.inline-box{
  width:21.25vw;
  height:200px;
  border: 1px solid #ccc;
  background:darkblue;
}
.thecards{
  background: pink;
  text-align:center;
}
.inline-card{
  width: 18vw;
  height: 100px;
  margin: 0 2vw;
  text-align: center;
  color: white;
  border: 1px solid #ccc;
  background: grey;
}
.flyover{
  z-index:1;
  top: -50px;
  float:left;
  height: 50px; /* <=== 50px less than the .inFly div */
  width: 100vw;
  border: 1px solid green;
}
.inFly{
  width: 85vw;
  height: 100px; /*<== overflows the parent .flyover div by 50px */
  margin: 0 7.5vw;
  background:red;
  border:1px solid purple;
  color:white;
}
.centerText{
  display:flex;
  align-items: center;
  justify-content: center;
}

<div class="bgBlue"><span>Click FULL PAGE at top right...</span>
  <div class="flex-parent">
    <div class="inline-box"></div>
    <div class="inline-box"></div>
    <div class="inline-box"></div>
    <div class="inline-box"></div>
  </div>
</div>
<div class="flyover"><div class="inFly centerText">Flyover Div</div></div>
<div class="thecards">Cards DIV
  <div class="flex-parent">
    <div class="inline-card">Image Here</div>
    <div class="inline-card">Image Here</div>
    <div class="inline-card">Image Here</div>
    <div class="inline-card">Image Here</div>
  </div>
</div>