How can I achieve some overlapping layouts when there is not enough space in the parent container?

I believe I found a pure CSS solution that might work for you. From what I understand, you are the Parent Div container and random child divs that represent cards.

Disclaimer : I'm using pixels for this to show the proof of concept, but if you do the math, you can achieve the same effect by using all percentages.

Basic HTML Layout

// I am using the <!-- comments --> to remove whitespace between divs
// This is important because we don't want to being floating elements
// So each pixel is going to count
<div class="parent">
     <div class="child">card 1</div><!--
  --><div class="child">card 2</div><!--
  --><div class="child">card 3</div><!--
  --><div class="child">card 4</div><!--
  --><div class="child">card 5</div><!--
  --><div class="child">card 6</div>
</div>

For demonstration purposes, I made these cards 100px by 150px. I think it helps to visualize the math. This is the basic CSS we need to layout the fields.

CSS

// normalize div elements
*{ box-sizing: border-box; margin: 0; padding: 0; }

.parent{
  position: relative;
  width: 480px; //4 cards wide with 10px of margin on each side (4*100)+(4*20)
  background: blue;
  height: 340px;
  overflow:hidden;
  margin: 0px auto;
}
.child{
  position: relative;
  width: 100px;
  height: 150px;
  border:1px solid #000;
  background: #333;
  color: white;
  margin: 10px;
  display: inline-block;
}

Now that the grid is set up, we just need to move the third and fourth rows up.

One of the great things about CSS is that you can apply styles to elements that might not exist on the page. Using the nth-child selector will help us locate these unknown elements.

MOAR CSS

.child:nth-child(n+9){
  // move cards from their origin up 330px and left 5px
  transform: translateY(-330px) translateX(-5px);
}

The only thing you need to do is create enough rules to match the many kinds of results you might have.

Example : I need to support 18 cards . Just add another rule!

.child:nth-child(n+17){
  // all we have to do is double the increments
  transform: translateY(-660px) translateX(-10px);
}

Hope that helps.

JSFiddle at work