title: Make text visible above overlapping div
body: <p>I have a design requirement where a div has to overlap another div, but the text within the inner div needs to be visible. </p>
  
  <pre><code>&lt;div class='box1'&gt;
    &lt;div class='sendAbove'&gt;
      This is a message I want to be visible in this div
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='box2'&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.box1 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20px;
    left: 20px;
    background: white;
    border: solid red 1px;
    z-index: 3;
  }
  
  .box2 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: white;
    border: solid blue 1px;
    z-index: 4;
  }
  
  .sendAbove {
    z-index: 5;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/sriv87/Lcoxrgpw/9/" rel="nofollow noreferrer">https://jsfiddle.net/sriv87/Lcoxrgpw/9/</a></p>
  
  <p>Edit:
  Updated fiddle
  <a href="https://jsfiddle.net/sriv87/c8eh5fcs/" rel="nofollow noreferrer">https://jsfiddle.net/sriv87/c8eh5fcs/</a></p>
  
  <p><a href="https://i.stack.imgur.com/oeAx3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oeAx3.png" alt="Expected result"></a></p>