覆盖已覆盖父div

Question

如何覆盖已覆盖父div的兄弟div？我有这个<div>驻留在它的父div中并完美地覆盖它。我想用另一个<div>覆盖这个div（有人选择div时的动作）。这个叠加层将是不透明的，但由于某些原因我似乎无法覆盖它。我尝试过使用margin-top:-100%，但它不会做到这一点。有什么想法吗？

.one-third-text {
  width: 33.3333%;
  height: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.text-btn-bg{
  background: #2ecc71;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.text-btn { 
  display: flex;
  height: 100%;
  width: 100%;
  color: #fff;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-transition: -webkit-transform .07s ease-out; 
  -moz-transition: -moz-transform .07s ease-out; 
  -o-transition: -o-transform .07s ease-out; 
  transition: transform .07s ease-out;
}

h3.h3-text-btn { 
  vertical-align: middle;
  display: table-cell;
  padding: 10px 30px;
  margin: auto;
}

.text-btn:active, .text-btn.text-btn-android { 
  -webkit-transform: scale(0.9, 0.80);
  transform: scale(0.90, 0.80);
  /*opacity: 0.80;*/
  color:#2ecc71;background:#f6f6f6; 
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

<div class="one-third-text">
  <div class="text-btn-bg animated-second bounceInUp">
    <div class="text-btn txt-btn2">
      <h3 class="h3-text-btn">Food &amp; Drinks</h3>
    </div>
    <!-- This div should overlay the above div -->
    <div class="text-btn txt-btn2" style="margin-top:-100%;">
      <h3 class="h3-text-btn">SELECTED</h3>
    </div>
  </div>
</div>