title: How to make div to overlay parent div
body: <p>Pink and green layout are parent layout. When gray layout is clicked blue layout will be created. I want blue layout overlay the parent layout (pink and green) and comes to top. </p>
  
  <p>But the blue layout is overlay by pink layout. I need help on it.</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>div{
      display:block;
  }
  #content{
      height:400px;
      width:100%;
      background-color:green;     
  }
  .center{
      width:100px;
      height:100px;
      background-color:#808080;         
      text-align: center;
      margin:auto;
  }      
  #foo{
      background-color:#2060ff;
      border: 1px solid #000;
      width:50px;
      height:50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;    
      &lt;div id="d" class="center"&gt;    
          &lt;div class="center"&gt;
              Click here to create new blue element
          &lt;/div&gt;      
      &lt;/div&gt;       
      &lt;div style="background-color:pink;width:100%;height:20px;"&gt;&lt;/div&gt;  
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>Check <a href="http://jsfiddle.net/edisonthk/wbfTq/1/" rel="nofollow noreferrer">JSFiddle</a></p>