title: stacking div on top of text relative to container div
body: <p>I'm trying to create a text reveal animation. for that I have 2 <code>div</code>s that need to be on top of <code>h1</code> &amp; <code>h3</code> tags inside an <code>anim-container</code> parent div. The <code>.anim-container</code> is a flexbox with <code>column</code> flex-direction. And it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/8XdzX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8XdzX.png" alt="current layout"></a></p>
  
  <p>Here's the html and SCSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.anim-container {
    width: 500px;
    //height: 120px;
    overflow: hidden;
    border: solid 1px black;
  }
  
  .rectbg {
    margin: 0;
    width: 500px;
    height: 50px;
    position: relative;
    z-index: 5;
    background: yellow;
    color: white;
  }
  
  .rectbg2 {
    @extend .rectbg;
    background: pink;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="anim-container"&gt;
    &lt;h1 ref="title" class="title"&gt;title text!&lt;/h1&gt;
    &lt;h3 ref="subtitle" class="subtitle"&gt;this is subtitle text&lt;/h3&gt;
    &lt;div ref="rectbg" class="rectbg"&gt;&lt;/div&gt;
    &lt;div ref="rectbg2" class="rectbg2"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want the pink and yellow divs to stack on top of the 2 headings. So I can then animate them and create a text reveal animation. What is the best possible way of doing something like this? Also If I do <code>position: absolute</code> the divs shoot up to the top of page which isn't what i want I want them to be inside the border of <code>anim-container</code></p>