title: CSS: Overlapping DIVs issue
body: <p>I want to have 2 divs. looking like that:</p>
  
  <p><img src="https://i.imgur.com/gwe8i.png" /></p>
  
  <p>The problem is that if i just set <code>margin-top: -50px</code> DIV2 becomes on TOP. 
  If i use z-index, DIV2 goes behind, but the form on DIV2 cannot be used, since it DIV2 is somewhat behind, cannot be clicked, selected or any of those. </p>
  
  <p>How do I make it work?</p>
  
  <p>DIV1 css:</p>
  
  <pre><code>position:relative;
  height: 350px;
  margin-top: -50px;
  z-index: -10;
  </code></pre>
  
  <p>DIV2 css:</p>
  
  <pre><code>padding: 24px;
  z-index: 10;
  margin-bottom: -50px;
  </code></pre>