title: Partially overlap elements using CSS
body: <p>I'd like to partially overlap multiple HTML elements - say DIVs - as in the below image. The black-bordered rectangles (<a href="https://en.wikipedia.org/wiki/Hanafuda" rel="noreferrer">Hanafuda</a> cards) represent the elements I want to overlap.</p>
  
  <p><img src="https://i.stack.imgur.com/MjxVV.png" alt="enter image description here"></p>
  
  <p>With Javascript I'm sure I could come up with something, but I'd like to know if there's a pure CSS solution. I considered relative positioning but the problem is that each card needs a bigger and bigger offset along the x-axis.</p>
  
  <p>Ideally I'd like the degree of overlap to depend on how much space there is, so that the elements crowd together more when cramped, but that's secondary and I don't mind using JS to accomplish it.</p>