title: CSS3 using overlap or side by side positioning in responsive design
body: <p>I'm still learning my way around in CSS3 and responsive design. </p>
  
  <p>Stack has been great and has helped in many cases but I am stuck on this one.</p>
  
  <p>I want a responsive site with angled images, so I was trying to use side by side divs that were responsive or divs that overlap. <a href="http://www.tutorialspoint.com/css/css_layers.htm" rel="nofollow noreferrer">I found this bit of code</a> below but it still not working as expected/desired.</p>
  
  <p>Here is a <a href="https://jsfiddle.net/7h0dL9jc/" rel="nofollow noreferrer">Fiddle</a> that was a good start, but ultimately I could not get it to adjust smoothly</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div style="background-color:red;
              width:300px;
              height:100px;
              position:relative;
              top:10px;
              left:80px;
              z-index:2"&gt;
  &lt;/div&gt;
  &lt;div style="background-color:yellow;
              width:300px;
              height:100px;
              position:relative;
              top:-60px;
              left:35px;
              z-index:1;"&gt;
  &lt;/div&gt; 
  &lt;div style="background-color:green;
              width:300px;
              height:100px;
              position:relative;
              top:-220px;
              left:120px;
              z-index:3;"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt; 
  </code></pre>
  
  <p>So is it best have side by side divs or overlapping divs, for fluid responsive adjustments?</p>
  
  <p>Since I may not be explaining what I'm looking for, this is a sketch of the desired result I'm trying to explain </p>
  
  <p><img src="https://i.stack.imgur.com/6KHw9.jpg" alt="enter image description here"></p>