title: CSS using z-index doesn't place child element behind its parent
body: <p>I am trying to make a drop down menu that slides from header. 
  I have a header and inside it I have some div with border-bottom 1px line and background-color. Inside this div I would like to place logo, searchbox some links and a user profile button. When this button is clicked I would like to drop down menu below this button. Unfortunately this dropdown menu appears in front of header and not slides from behind of header (obscuring the header background and bottom-border line). I have tried solution like below (it is simplified version). </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>header {
    position: relative;
    z-index: 5;
  }
  
  .dropdown {
    background-color: yellow;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 1;
  }
  
  .background {
    position: absolute;
    background-color: #ccca;
    border-bottom: 1px solid black;
    width: 100%;
    height: 50px;
    z-index: 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;div class="background"&gt;
      &lt;div class="dropdown"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried many z-index configurations and none of them seems to work. 
  1. div.background with z-index 2, div.dropdown with z-index 1 or even -1
  2. div.background without z-index and position, div.dropdown with z-index -1 (here dropdown was behind header but menu links stopped working and menu was also behind main content of webpage)</p>
  
  <p>How can I make my div.dropdown to slide from behind the header bar with background and border bottom line? Isn't it possible to have this div.dropdown inside header div tree as the descendant element. </p>